为什么事件侦听器无法读取属性？

Question

我是 Javacript 的新手，我正在尝试一些活动。这里的目标是点击一些文本并显示一条消息。我的 html 中有一个 p 元素，如下所示：

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

我在 .js 文件中尝试了这个，但没有任何反应。控制台这样告诉我："Uncaught TypeError: Cannot read property 'addEventListener' of null".

var demo=document.getElementById("tab");

demo.addEventListener("click", go);

function go(){
 alert("Hey");
}

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

Answer 1

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

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

var demo = document.getElementById("tab");

demo.addEventListener("click", go);

function go() {
  console.log("Hey");
}

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

Answer 2

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>

为什么事件侦听器无法读取属性？

Why event listener cannot read property?

html

javascript

event-handling

javascript-events

为什么事件侦听器无法读取 属性？

Why event listener cannot read property?

html

javascript

event-handling

javascript-events

为什么事件侦听器无法读取属性？