使用JS点击按钮切换body背景色时代码仅生效一次如何解决

问题原因 #

• 你用for循环给按钮重复绑定了100次funct2点击事件，触发一次点击就会同时执行100次funct2，同时又绑定了100次funct3事件，第二次点击时两类事件都会触发，状态冲突所以无法正常切换
• 嵌套绑定事件的逻辑本身存在缺陷，每次点击都会新增事件绑定，不会自动移除之前绑定的事件，多次点击后会产生大量冗余事件执行，逻辑完全混乱

正确实现方案 #

你只需要绑定1次点击事件，用一个变量记录当前背景状态，每次点击切换状态即可：

// 初始化状态变量，记录当前是否为灰色背景
let isGreyBg = false
// 仅绑定一次点击事件
bg_button.addEventListener('click', () => {
  if (isGreyBg) {
    // 当前是灰色背景，切回白色
    body.style.backgroundColor = 'white'
    section_top.style.backgroundColor = ''
  } else {
    // 当前是白色背景，切为灰色
    body.style.backgroundColor = 'lightgrey'
    section_top.style.backgroundColor = 'white'
  }
  // 翻转状态
  isGreyBg = !isGreyBg
})

内容的提问来源于stack exchange，提问作者Abdelmounim SIFELHAK