如何修复“无法读取 null 的属性 'addEventListener'"错误 [英] How to fix "Cannot read property 'addEventListener' of null" error

问题描述

我正在从 Mozilla 开发者网络 (MDN) 学习 javascript.我在猜数字游戏中遇到错误.该错误在第 46 行显示未捕获的类型错误:无法读取 null 的属性 'addEventListener'".

我已经多次逐行检查和匹配代码，但我无法解决问题.当我删除 script.js 外部文件并将代码放在 index.html 标签内时，代码部分工作(某些功能不起作用).这是代码.请理解javascript代码和HTML在不同的文件中.

让 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');让guessCount = 1;让重置按钮；函数 checkGuess() {让 userGuess = Number(guessField.value);如果(猜测计数 === 1){guesses.textContent = '以前的猜测:';}guesses.textContent += userGuess + ' ';if (userGuess === randomNumber) {lastResult.textContent = '恭喜！你做对了！';lastResult.style.backgroundColor = '绿色';loworHi.textContent = '';setGameOver();} else if (guessCount === 10) {lastResult.textContent = '!!!游戏结束!!!';setGameOver();} 别的 {lastResult.textContent = '错了！';lastResult.style.backgroundColor = '红色';if (userGuess < randomNumber) {loworHi.textContent = '最后的猜测太低了！';} else if (userGuess > randomNumber) {loworHi.textContent = '最后的猜测太高了！';}}猜数++；guessField.value = '';guessField.focus();}guessSubmit.addEventListener('click', checkGuess);函数 setGameOver() {guessField.disabled = true;guessSubmit.disabled = true;resetButton = document.createElement('button');resetButton.textContent = '开始新游戏';document.body.appendChild(resetButton);resetButton.addEventListener('click', resetGame);}功能重置游戏(){猜测计数 = 1;const resetParas = document.querySelectorAll('.resultParas p');for (let i = 0; i <头><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"><script type="text/javascript" src="script.js"></script><title>猜数字游戏</title><身体><h1>猜数字游戏</h1><p>我们选择了一个 1 到 100 之间的随机数.看看您是否能在 10 圈或更少的时间内猜出它.我们会告诉您您的猜测是过高还是过低.</p><div class="form"><label for="guessField">输入一个猜测:</label><input type="text" id="guessField" class="guessField"><input type="submit" value="Submit guess" class="guessSubmit">

<div class="resultParas"><p class="猜测"></p><p class="lastResult"></p><p class="lowOrHi"></p>

</html>

解决方案

在加载 HTML 正文之前，您正在 中加载 Javascript 文件.因此你的线路

const guessSubmit = document.querySelector('.guessSubmit');

没有什么可查找的 - 您的 guessSubmit 类按钮尚不存在.由于 guessSubmit 为空，它不包含任何属性，因此错误.

最简单的解决方案是将