javascript - 如何获得自动换色？

Question

单击根按钮后，如何在用户不单击按钮的情况下让其他按钮自动从黑色变为相应的颜色？其他圈子不应该是按钮吗？单击根按钮后，我可以让圆圈在 2 秒内改变颜色吗？这是我的 JS Fiddle

<div class="interactiveBox">
<button id="root" onclick="changeColor(this,'#ff0000')" style="background-color: black"></button>
<button id="sacral" onclick="changeColor(this,'orange')" style="background-color: black"></button>
<button id="solar" onclick="changeColor(this,'yellow')" style="background-color: black"></button>
<button id="heart" onclick="changeColor(this,'green')" style="background-color: black"></button>
<button id="throat" onclick="changeColor(this,'blue')" style="background-color: black"></button>
<button id="third" onclick="changeColor(this,'purple')" style="background-color: black"></button>
<button id="crown" onclick="changeColor(this,'white')" style="background-color: black"></button>

function changeColor(obj,color) {
    //reset other buttons
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].style.backgroundColor = "#000000" ;
    }
    obj.style.backgroundColor=color;
}

Answer 1

您可以动态触发对其他按钮的点击。此外，如果您想在 2 秒后执行此操作，请使用 setTimeout:

document.getElementById('root').addEventListener("click", function() {
  setTimeout(function() {
    document.querySelectorAll(".interactiveBox button:not(#root)").forEach(function() {
      this.click();
    });
  }, 2000);
});