如何解决按钮点击逻辑中的Cannot read properties of null (reading 'addEventListener')错误？

这个错误的核心原因是：你的JavaScript代码在目标按钮元素被浏览器加载并添加到DOM树之前就执行了，导致document.getElementById("sendButton")返回null，无法调用addEventListener方法。

下面是三种可行的解决办法：

• 方法一：将JS代码放在HTML内容末尾
  把脚本放在</body>标签前，让浏览器先加载完所有DOM元素再执行JS：

  <button id="sendButton">Submit</button>
  
  <script>
  var send = document.getElementById("sendButton");
  send.addEventListener("click", function () {
    console.log("text");
  });
  </script>
  

• 方法二：监听DOM加载完成事件
  通过DOMContentLoaded事件确保DOM准备完毕后再执行代码，脚本位置不受限制：

  document.addEventListener('DOMContentLoaded', function() {
    var send = document.getElementById("sendButton");
    send.addEventListener("click", function () {
      console.log("text");
    });
  });
  

• 方法三：使用defer属性
  给<script>标签添加defer属性，脚本会在DOM加载完成后执行，且不阻塞HTML解析：

  <script defer>
  var send = document.getElementById("sendButton");
  send.addEventListener("click", function () {
    console.log("text");
  });
  </script>
  
  <button id="sendButton">Submit</button>
  

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