javascript - 尝试使用 JavaScript 中的 setTimeout 函数更改按钮的颜色

Question

我正在尝试使用 setTimeout 更改 javascript 中某些按钮的颜色。下面的代码中是否有多个样式元素似乎存在问题？

有什么想法可以修复下面的代码吗？或者让计数器工作的更好方法？

这是按钮样式等:

<button type="playball1" style="border-radius: 12px" style="border-radius: 50%";onclick = "null">1</button>

function changeButtonColor1() {
    document.getElementById("playball1").style.backgroundColor = "green";
}

function changeButtonColor2() {
    document.getElementById("playball2").style.backgroundColor = "green";
}

function changeButtonColor3() {
    document.getElementById("playball3").style.backgroundColor = "green";
}

function changeButtonColor4() {
    document.getElementById("playball4").style.backgroundColor = "green";
}

function changeButtonColor5() {
    document.getElementById("playball1").style.backgroundColor = "green";
}

function Playball() {
    setTimeout('changeButtonColor1()',1000);
    setTimeout('changeButtonColor2()',2000);
    setTimeout('changeButtonColor3()',3000);
    setTimeout('changeButtonColor4()',4000);
    setTimeout('changeButtonColor5()',1000);
};

Answer 1

您的代码不起作用，因为您尝试使用 getElementById("playball1") 获取元素，并且您设置了他的类型 type="playball1" 而不是您应使用 id="playball1"。

我不明白你的需求，但我认为你想要这样的东西:

function changeButtonColor(id) {
    document.getElementById(id).style.backgroundColor = "green";
}

function playball() {
    setTimeout('changeButtonColor("playball1")',1000);
    setTimeout('changeButtonColor("playball2")',2000);
    setTimeout('changeButtonColor("playball3")',3000);
    setTimeout('changeButtonColor("playball4")',4000);
    setTimeout('changeButtonColor("playball5")',5000);
};
playball();

<button id="playball1" style="border-radius: 12px" style="border-radius: 50%" onclick="null">1</button>
<button id="playball2" style="border-radius: 12px" style="border-radius: 50%" onclick="null">2</button>
<button id="playball3" style="border-radius: 12px" style="border-radius: 50%" onclick="null">3</button>
<button id="playball4" style="border-radius: 12px" style="border-radius: 50%" onclick="null">4</button>
<button id="playball5" style="border-radius: 12px" style="border-radius: 50%" onclick="null">5</button>