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");
        }
    }

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

我正在寻找一种无需使用多个change ___（）函数即可编写此代码的方法。

最佳答案

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

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