如何解决：“ TypeError：无法读取null的属性'addEventListener'...？// [英] how to fix : " TypeError: Cannot read property 'addEventListener' of null”…?//
问题描述
我正在从视频教程中学习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（嘿，你点击了p）
}）
这是javescript代码-下面是将看到任何错误的html代码...
< html>
< head>
< meta charset = utf-8>
< title> Rock Paper Sicssors Game< / title>
< link href = style.css rel = stylesheet type = text / css>
< script type = text / javascript src = app.js charset = utf-8>< / script>
< / head>
< body>
< header>
< h1> Rock Paper Sicssors< / h1>
< / header>
< div class = score-board>
< div id = user-label class = badge> user< / div>
< div id =计算机标签 class =徽章> comp< / div>
< span id =用户分数> 0< / span>：< span id =计算机分数> 0< / span>
< / div>
< div class = result>
< p>纸覆盖了岩石。您赢了！< / p>
< / div>
< div class = choices>
< div class = choice id = p>
< img src = game.image / paper-img.jpg alt = image height = 42 width = 42>
< / div>
< / div>
< div class = choices>
< div class = choice id = r>
< img src = game.image / rock-img.jpg alt = image height = 42 width = 42>
< / div>
< / div>
< div class = choices>
< div class = choice id = s>
< img src = game.image / siccsors-img.jpg alt = image height = 42 width = 42>
< / div>
< / div> < / p1>
< p1 id = action-message>采取行动。
< / body>
< / html>
之所以会这样，是因为您要包含包含您的文件的文件您的html文件的< head> 部分中的JavaScript。
< script type = text / javascript src = app.js charset = utf-8>< / script>
这意味着浏览器将尝试执行该语句
const p_div = document.getElementById（ p）;
但不会这样做，因为相关元素在中定义< body> 部分。
尝试将< script> 部分移到< body> 的末尾。 / p>
Im learning html/css/js from a video tutorial. Im learning how to write js code ans i cant help to solve a problem. I hope you give me the solution guys. The problem is about add.EventListener. When i run the code in chrome, in console it shows:"app.js:11 Uncaught TypeError: Cannot read property 'addEventListener' of null" I hope solve this problem with your help. Thank you!
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 p")
})
This is the javescript code - below will be the html code to see any mistakes...
<html>
<head>
<meta charset="utf-8">
<title>Rock Paper Sicssors Game</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="app.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1>Rock Paper Sicssors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Paper covers rock. You win!</p>
</div>
<div class="choices">
<div class="choice" id="p">
<img src="game.image/paper-img.jpg" alt="image" height="42" width="42">
</div>
</div>
<div class="choices">
<div class="choice" id="r">
<img src="game.image/rock-img.jpg" alt="image" height="42" width="42">
</div>
</div>
<div class="choices">
<div class="choice" id="s">
<img src="game.image/siccsors-img.jpg" alt="image" height="42" width="42">
</div>
</div>
<p1 id="action-message">Make your move.</p1>
</body>
</html>
This happens because you're including the file containing your JavaScript in the <head> section of your html file.
<script type="text/javascript" src="app.js" charset="utf-8"></script>
That means the browser will try to execute this statement
const p_div = document.getElementById("p");
but will fail to do so because the element in question is defined in the <body> section later on.
Try to move the <script> section to the end of the <body>.
这篇关于如何解决：“ TypeError：无法读取null的属性'addEventListener'...？//的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
