运行网站JS代码时报Cannot read property 'addEventListener' of null错误如何解决？

云上老周

2026-10-7

报错原因

这个报错的核心是你调用addEventListener的menu变量值为null，document.querySelector没有匹配到对应DOM元素，常见触发场景有两种：

JS代码执行时机早于DOM渲染完成：代码放在<head>标签内或DOM元素前面，运行到选择器逻辑时，对应元素还没被浏览器渲染到页面上，导致查询返回null
选择器和实际HTML属性不匹配：检查对应元素的id是否确实为mobile-menu，大小写、拼写是否完全一致，类名.navbar__menu也需要和HTML中的class属性完全匹配

解决方案

可以按以下优先级逐个排查解决：

调整JS代码位置
把你的JS代码块放到HTML文件的</body>闭合标签之前，确保所有DOM元素渲染完成后再执行JS逻辑。
包裹DOM加载完成监听事件
将所有逻辑放在DOMContentLoaded事件回调中，保证DOM渲染完成后才执行选择器和绑定事件的逻辑，示例代码：

document.addEventListener('DOMContentLoaded', () => {
  const menu = document.querySelector('#mobile-menu');
  const menuLinks = document.querySelector('.navbar__menu');

  const mobileMenu = () => {
    menu.classList.toggle('is-active');
    menuLinks.classList.toggle('active');
  };

  menu.addEventListener('click', mobileMenu);
})

增加非空判断增强代码健壮性
可以在操作DOM变量前先判断是否存在，避免匹配不到元素时直接抛出报错：

const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.navbar__menu');

// 确认两个元素都存在时再执行后续逻辑
if (menu && menuLinks) {
  const mobileMenu = () => {
    menu.classList.toggle('is-active');
    menuLinks.classList.toggle('active');
  };
  menu.addEventListener('click', mobileMenu);
}