javascript - JavaScript事件监听器

我正在尝试使用JS事件监听器更改主体的背景颜色。单击该按钮时，没有错误代码，并且颜色没有更改。

//Change body background-color
var buttonFour = document.querySelector("#button-four");

let colorOptions = ["brown", "blue", "orange", "green", "white"];

buttonFour.addEventListener("toggle", function() {
  for(let i = 0; i < colorOptions.length; i++) {
    document.body.style.background = colorOptions[i];
  }
})

最佳答案

您可能想听的是一个“单击”事件。当<detail>标记的状态更改时，将特别触发“切换”。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event

buttonFour.addEventListener("click", function() {
  for(let i = 0; i < colorOptions.length; i++) {
    document.body.style.background = colorOptions[i];
  }
})

编辑：刚意识到，您的处理程序也有问题-每次调用上述处理程序时，背景都会瞬间在所有颜色之间循环-始终以白色结尾。您需要跟踪当前显示的颜色，并在每次单击时转到下一个：

function colorChanger() {
  let currentColor = 0;
  return function handler() {
    currentColor = (currentColor + 1) % colorOptions.length
    document.body.style.background = colorOptions[currentColor];
  }
}

buttonFour.addEventListener("click", colorChanger())