JavaScript AddEventListenerコンソールでnullを返します

JavaScriptを初めて使用しており、最近DOMの学習を開始しました。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コードを記述するために何を、なぜ誰かが親切に私に指摘してもらえI s。ありがとう。

は見てみましょうか、提案されるように完全な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

あなたが求めるイベントは、 "onclick"ではなく[click]（https://www.w3.org/TR/DOM-Level-3-Events/#event-type-click）です。 – RobG

私は "クリック"と "onclick"の両方を試して、今すぐコードを投稿します。ありがとう –

利用のクリックイベントの代わりに、onclickの。

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

あなたが直面している場合は、このfiddle

を参照してください「プロパティを読み取ることができません...」のエラー、あなたが$（ドキュメント）.ready jqueryのなど平野jsの中の内側にあなたのjsのコードをラップすることができます。

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

出典

2017-08-01 05:07:48

イベント名は問題ですが、* p1Btn *はnullです。イベント名を変更しても問題は解決されません。 – RobG

は、コンソールに同じエラーが表示されても、提案を試してみました。 –

はい、p1Btnがコンソールにnullとして表示されます。 –

JavaScript AddEventListenerコンソールでnullを返します

答えて

関連する問題