补充CSS复选框菜单Hack时获取checkbox.checked报null错误求助

你遇到的!hiddenCheckbox.checked抛出null错误，核心原因是hiddenCheckbox变量的值为null——也就是JavaScript代码执行时，还没找到ID为header__checkbox的input元素。

常见原因及解决方案 #

1. JS代码执行时机过早

如果你的JavaScript代码放在<head>标签里，或者HTML结构中input元素的前面，此时DOM还没解析到这个input，getElementById自然返回null。

解决办法：

• 把JS代码移到HTML文档的末尾，</body>标签之前，确保所有DOM元素都已加载完成后再执行JS。
• 或者用DOMContentLoaded事件包裹代码，确保DOM加载完成后再获取元素：

document.addEventListener('DOMContentLoaded', function() {
  const hiddenCheckbox = document.getElementById("header__checkbox");
  const menuButton = document.querySelector(".menu-button");
  const menu = document.querySelector(".menu");

  function toggleMenu(event) {
    if (event.type === "click" ||
       (event instanceof KeyboardEvent && (event.key === "Enter" || event.key === " "))) {
      event.preventDefault();
      hiddenCheckbox.checked = !hiddenCheckbox.checked;
      menuButton.setAttribute("aria-pressed", hiddenCheckbox.checked);
      menu.setAttribute("aria-hidden", !hiddenCheckbox.checked);
    }
  }
});

2. 元素ID拼写不匹配

仔细检查HTML中input的idheader__checkbox和JS里的getElementById("header__checkbox")是否完全一致，包括下划线、大小写、特殊字符，任何拼写错误都会导致找不到元素。

额外优化建议 #

把内联的onclick和onkeydown属性改成JS事件监听，让代码更解耦，也便于维护：

1. 去掉HTML中label元素的onclick="toggleMenu(event)"和onkeydown="toggleMenu(event)"属性
2. 在DOMContentLoaded的回调里添加事件监听：

menuButton.addEventListener('click', toggleMenu);
menuButton.addEventListener('keydown', toggleMenu);

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