JS实现按钮点击功能报错Cannot read properties of null (reading 'addEventListener')

出现Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')报错的核心原因是：执行document.getElementById("go-button")时，对应的按钮元素还没有被浏览器加载到DOM树中，因此获取到的返回值为null，无法调用addEventListener方法。

2017年课程中的代码可正常执行，大概率是讲师将JavaScript代码放在了HTML文件<body>标签的末尾，等所有页面元素加载完成后才执行JS逻辑，因此可以正常获取到按钮元素。

• 将你的JS代码移到HTML文件中按钮元素的后面，或者放在</body>结束标签之前，确保DOM加载完成后再执行JS
• 给JS代码包裹DOM加载完成监听事件，示例代码如下：

// 等待DOM全部解析完成后再执行内部逻辑
document.addEventListener('DOMContentLoaded', function() {
  function buttonClicked(){
    console.log("Button clicked");
  }
  var btn = document.getElementById("go-button");
  btn.addEventListener("click", buttonClicked, true);
})

• 如果你是通过外部文件引入course.js，给script标签添加defer属性即可：

<script src="course.js" defer></script>

内容的提问来源于stack exchange，提问作者Luis M.