如何修复Dark Mode开关点击异常，实现单次点击正常切换

你的问题根源在于重复绑定了click事件监听器，导致后续点击时多个事件处理函数被触发，抵消了切换效果。

为什么会出现“每两次点击才切换”？ #

你在checkbox的onclick属性里调用darkMode()函数，而这个函数内部又通过addEventListener('click', ...)给开关绑定了一个新的点击事件处理函数。每次点击都会新增一个监听器：

• 第1次点击：执行darkMode()，添加第1个监听器（此时还没触发切换）
• 第2次点击：先执行darkMode()添加第2个监听器，然后触发第1个监听器，完成一次切换
• 第3次点击：执行darkMode()添加第3个监听器，然后触发前2个监听器——两次切换后回到原状态，看起来没变化
• 第4次点击：触发3个监听器，三次切换后完成一次有效切换

所以就出现了“每两次点击才触发一次切换”的错觉。

解决方案：三种可行的修复方式 #

方式1：移除onclick，一次性绑定事件（推荐）

这种方式避免重复绑定，是更标准的事件绑定写法：

修改后的JavaScript：

const body = document.getElementById('body');
const darkModeSwitch = document.getElementById('darkModeSwitch');

// 页面加载完成后，只绑定一次点击事件
document.addEventListener('DOMContentLoaded', () => {
  darkModeSwitch.addEventListener('click', () => {
    // 直接读取当前body的类名，避免外部变量缓存导致的状态不同步
    if (body.className === "lightMode") {
      body.className = "darkMode";
    } else {
      body.className = "lightMode";
    }
  });
});

修改后的HTML（移除onclick属性）：

<body id="body" class="lightMode">
  <div id="darkModeSwitch">
    <input type="checkbox" title="Toggle Light/Dark Mode" />
  </div>
</body>

方式2：保留onclick，但直接处理切换逻辑

如果一定要保留onclick的写法，让darkMode()直接执行切换逻辑，而不是绑定事件：

修改后的JavaScript：

const body = document.getElementById('body');
const darkModeCheckbox = document.querySelector('#darkModeSwitch input');

function darkMode() {
  // 直接切换类名
  if (body.className === "lightMode") {
    body.className = "darkMode";
    darkModeCheckbox.checked = true; // 同步checkbox选中状态（可选，确保样式和模式一致）
  } else {
    body.className = "lightMode";
    darkModeCheckbox.checked = false;
  }
}

HTML保持不变：

<body id="body" class="lightMode">
  <div id="darkModeSwitch">
    <input type="checkbox" onclick="darkMode()" title="Toggle Light/Dark Mode" />
  </div>
</body>

方式3：用classList.toggle()简化代码

可以用DOM的classList.toggle()方法更简洁地实现切换，同时优化CSS结构：

JavaScript：

const body = document.getElementById('body');
const darkModeSwitch = document.getElementById('darkModeSwitch');

document.addEventListener('DOMContentLoaded', () => {
  darkModeSwitch.addEventListener('click', () => {
    body.classList.toggle('darkMode');
    body.classList.toggle('lightMode');
  });
});

优化后的CSS（默认light模式，只切换dark类）：

#darkModeSwitch {
  position: absolute;
  left: 15px;
  top: 15px;
}
body {
  background-color: #FFF;
  transition: ease .3s;
}
body.darkMode {
  background-color: black;
}
#darkModeSwitch input[type="checkbox"] {
  width: 40px;
  height: 20px;
  background: #fff89d;
}
#darkModeSwitch input:checked[type="checkbox"] {
  background: #757575;
}
#darkModeSwitch input[type="checkbox"]:before {
  width: 20px;
  height: 20px;
  background: #fff;
}
#darkModeSwitch input:checked[type="checkbox"]:before {
  background: #000;
}

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