时间戳

首页 > 解决方案 > JavaScript 事件监听器

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

标签： javascriptarraysloops

解决方案

您可能想听的是“点击”事件。<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())

推荐阅读