javascript 如何修复“无法读取 null 的属性‘addEventListener’”错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54171545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix "Cannot read property 'addEventListener' of null" error
提问by Gourav Thakur
I am learning javascript from Mozilla developer network(MDN). I am getting error in Number guessing game. The error says "Uncaught TypeError: Cannot read property 'addEventListener' of null" at line 46.
我正在从 Mozilla 开发者网络（MDN）学习 javascript。我在猜数字游戏中遇到错误。该错误在第 46 行显示为“未捕获的类型错误：无法读取 null 的属性‘addEventListener’”。
I have checked and matched code line by line many times but i am unable to resolve the problem. The code works partially(some functions don't work) when I remove script.js external file and put the code in index.html inside tag. Here's the code. Please understand that the javascript code and HTML are in different file.
我已经多次逐行检查和匹配代码，但我无法解决问题。当我删除 script.js 外部文件并将代码放在 index.html 标签内时，代码部分工作（某些功能不起作用）。这是代码。请理解 javascript 代码和 HTML 在不同的文件中。
let randomNumber = Math.floor(Math.random() * 100) + 1;
const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const loworHi = document.querySelector('.loworHi');
const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');
let guessCount = 1;
let resetButton;
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = 'Previous guesses: ';
}
guesses.textContent += userGuess + ' ';
if (userGuess === randomNumber) {
lastResult.textContent = 'Congratulations! You got it right!';
lastResult.style.backgroundColor = 'green';
loworHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
setGameOver();
} else {
lastResult.textContent = 'Wrong!';
lastResult.style.backgroundColor = 'red';
if (userGuess < randomNumber) {
loworHi.textContent = 'Last guess was too low!';
} else if (userGuess > randomNumber) {
loworHi.textContent = 'Last guess was too high!';
}
}
guessCount++;
guessField.value = '';
guessField.focus();
}
guessSubmit.addEventListener('click', checkGuess);
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
function resetGame() {
guessCount = 1;
const resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0; i < resetParas.length; i++) {
resetParas[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<title>Number guessing game</title>
</head>
<body>
<h1>Number guessing game</h1>
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer.
We'll tell you if your guess was too high or too low.</p>
<div class="form">
<label for="guessField">Enter a guess: </label>
<input type="text" id="guessField" class="guessField">
<input type="submit" value="Submit guess" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
</body>
</html>
回答by TFrazee
You are loading the Javascript file in the <head>, before the body of your HTML Is loaded. Therefore your line
在加载<head>HTML 正文之前，您正在 , 中加载 Javascript 文件。因此你的线
const guessSubmit = document.querySelector('.guessSubmit');
Has nothing to look up - your button with class guessSubmitdoesn't exist yet. And since guessSubmitis null, it does not contain any properties, hence the error.
没有什么可查的 - 您的按钮与类guessSubmit尚不存在。由于guessSubmit为空，它不包含任何属性，因此出现错误。
The easiest solution is to put your <script>tag at the bottom of your HTML body rather than the head. This way it will load your Javascript after the DOM is completely loaded.
最简单的解决方案是将<script>标签放在 HTML 正文的底部而不是头部。这样它就会在 DOM 完全加载后加载你的 Javascript。
Alternative ways include adding event listeners to run your script after the DOM is loaded, such as DOMContentLoaded. See more here: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded.
替代方法包括添加事件侦听器以在加载 DOM 后运行您的脚本，例如DOMContentLoaded. 在此处查看更多信息：https: //developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded。
