JS报错Cannot read properties of null读取addEventListener解决方法

抛出Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')的核心逻辑很简单：执行事件绑定代码时，变量startButton的返回值是null，也就是JS没有成功匹配到你要找的按钮DOM元素，自然无法调用元素上的addEventListener方法。

• 核对元素获取逻辑的选择器是否匹配：
  检查startButton的赋值语句，确认选择器和HTML中按钮的属性完全一致：如果用getElementById获取，要确认按钮的id属性值和传入参数完全一致，没有拼写错误、大小写偏差、多余空格；如果用querySelector获取，要确认id选择器前加了#、类选择器前加了.，没有写错选择器前缀。
• 核对JS代码的执行时机：
  如果JS代码写在对应按钮元素的HTML代码之前，或者放在了<head>标签内且没有做加载延迟处理，代码执行时页面还没渲染出按钮节点，获取结果必然是null。
• 排查中间逻辑的DOM操作：
  如果获取元素和绑定事件的代码之间有其他DOM处理逻辑，确认没有逻辑提前把按钮节点从页面中移除。

方案1：调整脚本加载位置 #

最直接的处理方式是把JS代码移动到所有DOM元素的末尾，也就是</body>闭合标签之前，确保代码执行时所有页面元素都已经渲染完成：

<body>
  <!-- 其余页面内容 -->
  <button id="startButton">开始测验</button>

  <!-- JS代码放在所有DOM节点之后 -->
  <script>
    const startButton = document.getElementById('startButton');
    startButton.addEventListener("click", function startGame() {
      console.log("started");
    });
  </script>
</body>

方案2：监听DOM加载完成事件 #

如果不方便调整脚本位置，可以把DOM获取、事件绑定的逻辑包裹在DOMContentLoaded事件回调中，等DOM树完全解析完成后再执行对应逻辑，同时可以加一层判空兜底，降低后续排查成本：

document.addEventListener('DOMContentLoaded', () => {
  const startButton = document.getElementById('startButton');
  if (!startButton) {
    console.error('未匹配到id为startButton的按钮元素');
    return;
  }
  startButton.addEventListener("click", function startGame() {
    console.log("started");
  });
});

方案3：给外部脚本加延迟加载属性 #

如果你的JS逻辑写在独立的外部文件中，可以在引入脚本的<script>标签上添加defer属性，让浏览器等DOM解析完成后再执行脚本内容：

<head>
  <script src="./quiz.js" defer></script>
</head>

注意：defer属性仅对外部引入的脚本生效，对内联编写的JS代码无效。

修复完成后点击按钮，控制台就可以正常打印started日志。

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