问题描述
我正在从视频教程中学习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'...?//的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!