如何解决它:“未捕获的TypeError:无法读取null的属性'addEventListener'” ...?

时间:2019-07-24 19:49:32

标签: javascript html addeventlistener

我正在从视频教程中学习html / css / js。 我正在学习如何编写js代码,但我无助于解决问题。 希望您能给我解决方案的人。 问题是关于add.EventListener的。 当我在Chrome中运行代码时,在控制台中显示:“ app.js:11 Uncaught TypeError:无法读取null的属性'addEventListener'” 希望在您的帮助下解决这个问题。 谢谢!

const computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_div = document.querySelector(".result");
const p_div = document.getElementById("p");
const r_div = document.getElementById("r");
const s_div = document.getElementById("s");

p_div.addEventListener('click', function() {
    console.log("hey you clicked on p");
})`

2 个答案:

答案 0 :(得分:3)

当页面上没有具有该ID的元素时,

document.getElementById('p')将返回null。我建议您浏览HTML并确保您实际上具有带有该ID的元素。

创建该常量后,您可以console.log(p_div)来查看该元素的值,然后再尝试addEventListener

答案 1 :(得分:0)

您可以检查p_div是否存在。

if(p_div) {
  p_div.addEventListener('click', function() {
    console.log("Hey you clicked on p");
  });
}