JS明暗模式切换刷新后需点两次且报checked相关TypeError错误求解

问题定位 #

1. 报错Uncaught TypeError: Cannot set properties of null (setting 'checked')的原因 #

• JS加载时机早于DOM渲染：如果你的JS代码放在<head>标签内且没有加defer属性，代码执行时ID_HERE对应的input元素还没渲染完成，document.getElementById("ID_HERE")返回null，赋值checked属性就会触发报错。
• HTML语法错误：你提供的HTML代码末尾多了一个多余的</span>闭合标签，会打乱DOM解析结构，导致元素无法被正常识别。

2. 点击两次才生效的原因 #

• 事件逻辑冲突：<label>的for属性绑定了input的id，点击label内部元素会自动触发input的checked状态切换，你额外给span加了onclick事件手动调用切换逻辑，单次点击会触发两次状态修改，等于状态未变更。
• 执行顺序错误：body的onload先调用stored()把checked设为存储的正确值，紧接着调用toggle()又做了一次状态翻转，导致初始加载后的状态和预期相反，第一次点击需要先修正状态，看起来就需要点击两次才生效。
• 函数逻辑重复冗余：stored和toggle两个函数功能重叠，多次读写checked值和localStorage，容易出现状态不同步的问题。

解决方法 #

第一步：修复HTML代码 #

删掉多余的闭合标签，移除重复的点击事件绑定，把切换逻辑绑定到input的onchange事件上：

<body>
<label for="ID_HERE" class="toggle-switchy" >
    <input checked type="checkbox" name="server" id="ID_HERE" onchange="handleModeChange()">
    <span class="toggle" id="saveDarkLight"></span>
    <span class="switch"></span>
</label>
<!-- 把JS代码放在body末尾，确保DOM加载完成再执行 -->
<script src="你的JS文件路径"></script>
</body>

第二步：重构JS逻辑 #

合并重复逻辑，确保状态同步：

// 页面DOM加载完成后初始化明暗模式
document.addEventListener('DOMContentLoaded', initMode)

// 统一处理模式切换事件
function handleModeChange() {
  const modeInput = document.getElementById("ID_HERE")
  // 应用对应模式
  modeInput.checked ? lightmode() : darkmode()
  // 存储当前状态到localStorage
  localStorage.setItem("server", modeInput.checked)
}

// 初始化模式状态
function initMode() {
  const modeInput = document.getElementById("ID_HERE")
  const storedValue = localStorage.getItem("server")
  // 优先使用本地存储的状态，没有则用input默认的checked值
  if (storedValue !== null) {
    modeInput.checked = storedValue === 'true'
  }
  // 应用对应模式
  modeInput.checked ? lightmode() : darkmode()
}

function darkmode() { 
  const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i++) {
    bodyChanges[i].style.background = '#0c0a0f';
  }
}

function lightmode() { 
  const bodyChanges = document.querySelectorAll('.margin_body');
  for (let i = 0; i < bodyChanges.length; i++) {
    bodyChanges[i].style.background = 'white';
  }
}

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