重置猜数字游戏后出现Uncaught TypeError错误求助

嘿，我一眼就看出问题所在了——你点击重置按钮后触发的错误，核心原因是你把需要操作的DOM元素彻底删掉了，之后再想给它赋值自然就找不到啦！咱们一步步拆解修复：

错误根源 #

你的reset()函数里写了：

document.getElementById('player-guess').remove();

这行代码会把页面上的#player-guess元素从DOM树里完全移除，不是清空内容，是直接删掉！等你之后再点击「Guess」按钮调用guessToUI()时，document.getElementById('player-guess')返回的就是null，自然会抛出Cannot set property 'innerHTML' of null的错误。

修复方案 #

我给你调整几个关键地方，就能解决问题：

1. 修改reset函数：清空元素内容而非删除元素 #

把移除元素的代码改成清空innerHTML，这样元素还留在DOM里，后续操作能正常找到它。同时别忘了重置随机数——重置游戏总得换个新数字对吧？

function reset() {
  document.getElementById('input').value = "";
  // 清空内容，保留元素本身
  document.getElementById('player-guess').innerHTML = "";
  // 生成新的目标数字
  actualNum = randomNumber();
}

2. 避免重复绑定事件 #

你原来的reset()里调用了listeners()，这会导致每次重置都给按钮重复绑定事件——比如点击3次重置后，点一次Guess会触发3次guessToUI()。咱们只需要在初始化时绑定一次事件就够了，把listeners()的调用留在初始化阶段，不要在reset里重复调用。

3. （可选）清理HTML里的冗余标签 #

你的HTML里有个多余的</form>标签，虽然不影响报错，但建议删掉，保持代码整洁：

<div class="center-block">
  <input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
  <button id="guesser" class="btn">Guess</button>
  <button id="clear" class="btn">Clear</button>
  <!-- 删掉这里的</form> -->
</div>

完整修复后的代码 #

JavaScript部分 #

var actualNum = randomNumber();

function randomNumber() {
  return Math.floor(Math.random() * 101);
}

function findCorrectGuess(actualNum, userGuess) {
  if (userGuess > actualNum) {
    return "That is too high!"
  } else if (userGuess < actualNum) {
    return "That is too low!"
  } else if (userGuess === actualNum) {
    return "BOOM!"
  }
}

function reset() {
  document.getElementById('input').value = "";
  document.getElementById('player-guess').innerHTML = "";
  actualNum = randomNumber();
}

function clearField() {
  document.getElementById('input').value = "";
}

function guessToUI() {
  let userGuess = document.getElementById('input').value;
  document.getElementById('player-guess').innerHTML = `<center><h1>Your last guess was</h1><h2>${userGuess}</h2><h3>${findCorrectGuess(parseInt(actualNum),parseInt(userGuess))}</h3></center>`
}

function listeners() {
  document.getElementById('guesser').addEventListener('click', guessToUI);
  document.getElementById('clear').addEventListener('click', clearField);
  document.getElementById('reset').addEventListener('click', reset);
}

// 初始化时只绑定一次事件
listeners();

HTML部分 #

<header>
  <h1>
    <center><span id="num">Number</span>
    <span id="guess">Guesser</span></center>
  </h1>
</header>
<div class="center-block">
  <input id="input" type="number" name="fname" placeholder="Enter your guess"><br>
  <button id="guesser" class="btn">Guess</button>
  <button id="clear" class="btn">Clear</button>
</div>
<div id="player-guess">
</div>
<footer class="bottom">
  <button id='reset' class="btn">Reset</button>
</footer>

这样修改后，点击重置按钮就不会再报错，而且游戏逻辑也更合理——每次重置都会生成新的目标数字，事件也不会重复触发啦！

内容的提问来源于stack exchange，提问作者user3763875