Javascript 重构此代码的最佳方法是什么？

编写以下代码的更有效方法是什么：

<button onclick="changeRed()">red</button>
<button onclick="changeGray()">gray</button>
<button onclick="changeBlack()">black</button>    

myLoader = document.getElementsByClassName('preloader');
    function changeGray() {
        for (i = 0; i < myLoader.length; i++) {         
            myLoader[i].setAttribute("id", "gray");
        } 
    }

    function changeBlack() {
        for (i = 0; i < myLoader.length; i++) {
            myLoader[i].setAttribute("id", "black");
        }
    }

    function changeRed() {
        for (i = 0; i < myLoader.length; i++) {
            myLoader[i].setAttribute("id", "red");
        }
    }

红色
灰色
黑色
myLoader=document.getElementsByClassName（'preload'）；
函数changeGray（）{
对于（i=0；i

我使用for循环作为在一个页面上使用多个ID的变通方法（这是针对特定的模型-将不会在生产中使用）

---

我正在寻找一种不使用多个change\uuuuuuuuo（）函数的编写方法。

您可以将颜色作为函数的参数：

函数更改颜色（颜色）{
对于（i=0；i

重构，以便在函数上接受颜色值，并只保留一个函数来设置值

<button onclick="setColor('red')">red</button>
<button onclick="setColor('gray')">gray</button>
<button onclick="setColor('black')">black</button>    


myLoader = document.getElementsByClassName('preloader');
    function setColor(color) {
        for (i = 0; i < myLoader.length; i++) {         
            myLoader[i].setAttribute("id", color);
            myLoader[i].setAttribute("style", 'color:'+color);
        } 
    }

红色
灰色
黑色
myLoader=document.getElementsByClassName（'preload'）；
函数setColor（颜色）{
对于（i=0；i

为什么不只创建一个函数

changeColor（color）

来接收

color

作为参数？为什么要设置id？ID是单数的，因此如果将其设置为多个元素，则这不是最佳做法。如果它只是一个元素，那么有更好的方法来设置它，但是更改id仍然没有什么意义。