JavaScript 事件监听器

Question

我正在尝试使用 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];
  }
})

Answer 1

您可能想要监听的是“点击”事件。当 <detail> 的状态时，会专门触发“toggle”标签更改。 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())