Question

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

Answer 1

使用点击事件而不是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.
});

JavaScript AddEventListener在控制台中返回null

1 个答案: