Question

我在基本的 JS 按钮中收到“未捕获类型错误：无法读取 null 属性（读取‘addEventListener’）”错误

2021-11-23

27848

javascript html

我试图制作一个按钮，当单击时在控制台上打印字符串“按钮被单击”，但我一直收到错误 Uncaught TypeError：无法读取 course.js:70 处的 null 属性（读取“addEventListener”） 。

这是 HTML 按钮的代码：

<button id="go-button">Go</button>
<br>
Click that button

这是它的 Javascript：

function buttonClicked(){
console.log("Button clicked");
}

var btn = document.getElementById("go-button");
btn.addEventListener("click", buttonClicked, true);

我正在学习 2017 年的视频课程，并复制了讲师编写的确切代码，但他的运行符合预期。我认为也许是过时的方法导致了问题，但后来查了一下，大约有三个网站显示了类似的例子。老实说，我感到很困惑。

Answer 1

您的代码似乎在 DOM 加载到浏览器之前就已执行。
将其放在 window.onload 下。这样它就能找到 go-button ，然后就能向其添加事件侦听器。

function buttonClicked(){
    console.log("Button clicked");
}

window.onload=function(){
  var btn = document.getElementById("go-button");
  btn.addEventListener("click", buttonClicked, true);
}

参考：无法读取 null 的属性“addEventListener”

或

将您的脚本导入放在 HTML 的 body

<html>
    <body>
        .........
        <script src="main.js"></script>
    </body>
</html>


  
   参考：
   
    上述问题的另一个答案

Answer 2

将 defer 属性添加到链接 html 中的 js 代码的脚本元素。这将阻止您的代码在 DOM 加载到浏览器之前执行