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