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

//更改主体背景颜色
var buttonFour=document.querySelector（“按钮四”）；
让颜色选项=[“棕色”、“蓝色”、“橙色”、“绿色”、“白色”]；
buttonFour.addEventListener（“切换”，函数（）{
for（设i=0；i

您可能想要监听的是“单击”事件。“toggle”（切换）是在

标记的状态更改时专门触发的

---

很少观察到：

• 不要监听

  切换

  事件，而是监听

  单击

  事件
• 事件侦听器中的循环始终以最后一个元素（白色）结束

解决方案：我们可以从数组中获取随机颜色，而不是循环

//更改主体背景颜色
var buttonFour=document.querySelector（“按钮四”）；
让颜色选项=[“棕色”、“蓝色”、“橙色”、“绿色”、“白色”]；
buttonFour.addEventListener（“单击”，函数（）{
document.body.style.background=colorOptions[Math.floor（Math.random（）*colorOptions.length）]；
})

---

更改颜色

每次都会将颜色更改为

白色

。此外，按钮通常不会发出

切换

事件-

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())