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

回答

相關問題