JavaScript AddEventListener在控制台中返回null

时间:2017-08-01 04:40:41

标签: javascript button onclick addeventlistener

我是JavaScript的新手,最近开始学习DOM。 在我的代码中,我尝试将一个click事件监听器添加到按钮,如下所示:

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!!!");
});

1 个答案:

答案 0 :(得分:0)

使用点击事件而不是onclick。

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

请参阅此fiddle

如果您正面临'无法读取属性...'错误,那么您可以将js代码包装在$(document).ready jquery或简单的js中。

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