JavaScript AddEventListener在控制台中返回null

刚接触JavaScript并且最近开始学习DOM。在我的代码，我尝试添加click事件侦听器的按钮，如下图所示：JavaScript AddEventListener在控制台中返回null

var p1Btn = document.querySelector("#p1"); 
p1Btn.addEventListener("onclick", function(){ 
"use strict"; 
alert("P1 BUTTON CLICKED!!!"); 
});

，但我不断收到在控制台这个错误，

VM86:2 Uncaught TypeError: Cannot read property 'addEventListener' of null 
at <anonymous>:2:10

进一步检查，我发现它实际上是指向这一行我的代码块：

p1Btn.addEventListener("onclick", function(){

可能有人亲切地指出我为什么这个被聚焦的和什么是最好的方式来编写JavaScript代码我秒。谢谢。

是否加入建议完整的HTML代码，就来看看：现在

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>DOM</title> 
</head> 

<body> 
    <h1>Score Keeper</h1> 

    <h1>0 to 0</h1> 

    <p>Playing to: 5</p> 

    <input type="number"> 

    <button id="p1">Player 1</button> 
    <button id="p2">Player 2</button> 
    <button id="reset">Reset</button> 

    <script type="text/javascript" src="dom.js"></script> 

</body> 
</html>

的JavaScript文件包括：

var p1Btn = document.querySelector("#p1"); 
p1Btn.addEventListener("onclick", function(){ 
"use strict"; 
alert("P1 BUTTON CLICKED!!!"); 
});

来源

2017-08-01 Anand Rajput

您必须忽略某些内容并且var p1Btn = document.querySelector（“＃p1”）;'返回null。代码块是添加在init时间还是动态调用的侦听器？发布您的整个代码。 – marekful

您要查找的事件是[“click”]（https://www.w3.org/TR/DOM-Level-3-Events/#event-type-click），而不是“onclick”。 – RobG

我已经尝试了“点击”和“onclick”，现在将发布代码。谢谢 –

使用click事件，而不是的onclick。

document.getElementById("p1").addEventListener("click", function(){ 
"use strict"; 
alert("P1 BUTTON CLICKED!!!"); 
});

看到这个fiddle

如果你正面临“无法读取属性...”错误，那么你可以用里面的$（document）。就绪jQuery的或纯JS喜欢你的js代码。

document.addEventListener("DOMContentLoaded", function(event) { 
    //put js code here. 
});

来源

2017-08-01 05:07:48

事件名称是一个问题，但* p1Btn *为空，更改事件名称不会解决该问题。 – RobG

已经尝试过你的建议，在控制台仍然显示相同的错误 –

是的，它显示控制台中p1Btn为null，对此有任何修复？ –

JavaScript AddEventListener在控制台中返回null

回答

相关问题