JavaScript移动端菜单切换功能失效问题求助

控制台报错信息（对应截图内容）：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

问题原因 #

你的JS代码在页面DOM元素还没加载完成时就执行了，导致document.getElementById('menu-button')找不到对应元素，返回null，调用addEventListener自然会报错。

解决方法 #

有三种常见方案可以确保DOM加载完成后再执行JS代码：

• 将JS代码放在HTML的</body>标签之前，这样页面元素加载完才会执行脚本
• 用DOMContentLoaded事件包裹代码，监听DOM加载完成事件
• 给引入JS的<script>标签添加defer属性，让脚本在DOM解析完成后执行

修改后的代码示例（推荐用DOMContentLoaded方案） #

document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('menu-button')
  const nav = document.getElementById('menu')

  function navToggle() {
    button.classList.toggle('open')
    nav.classList.toggle('hidden')
    document.body.classList.toggle('no-scroll')
  }

  // 增加判断，避免元素不存在时再次报错
  if (button && nav) {
    button.addEventListener('click', navToggle)
  }
})

额外检查点 #

• 确认HTML中存在id="menu-button"和id="menu"的元素，注意id的大小写完全匹配（getElementById区分大小写）
• 检查是否有其他脚本修改了这些元素的id或移除了元素

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