为什么事件监听器不能读取属性

Why event listener cannot read property?

本文关键字:读取 属性 不能读 不能 事件 监听器 为什么      更新时间:2023-09-26

我是JavaScript的新手,我正在尝试一些事件。这里的目标是单击一些文本并显示一条消息。我的html中有一个p元素,像这样:

<p id="tab">Click me</p>

在.js文件中,我尝试了这个,没有发生任何事情。控制台告诉我:

未捕获类型错误:无法读取属性'addEventListener'的null

var demo=document.getElementById("tab");
demo.addEventListener("click", go);
function go(){
    alert("Hey");
}

上面的代码位于一个单独的.js文件

您的脚本似乎工作良好。通过在元素中添加onload处理程序或将其放在</body>

之前,确保它在元素创建后运行。

var demo = document.getElementById("tab");
demo.addEventListener("click", go);
function go() {
  console.log("Hey");
}
<p id="tab">Click me</p>

Code shown below works in IE, Chrome and FireFox - I didn't test this in  
any other browser.
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
    function InitPage() {
        var demo = document.getElementById("tab");
        demo.addEventListener("click", go);
        function go() {
            console.log("Hey");
        }
    }
</script>
</head>
<body onload="InitPage();">
    <p id="tab">Click me</p>
</body>
</html>