JS新手求助：猜数字游戏添加输入框点击后重置与20次点击禁用按钮功能

嗨，我来帮你搞定这两个需求～其实都是很容易实现的小改动，咱们一步步来调整你的代码：

需求1：点击Check按钮后重置输入框 #

你已经找到了guess.value = null;这个关键代码，但需要把它放到Check按钮的点击事件函数内部，这样每次点击按钮后都会自动清空输入框，不用用户手动删除啦。

需求2：用完20次机会后禁用按钮并将分数设为0 #

我们需要在每次分数减少后，判断当前剩余次数是否已经到0，如果是就禁用Check按钮，同时把分数显示为0，再给用户一个游戏结束的提示。另外别忘了给「Again!」按钮加上重置功能，不然游戏结束后没法重新玩哦～

下面是修改后的完整代码，我用注释标了所有新增/调整的地方：

HTML部分（保持不变）

<header>
  <h1>Guess My Number!</h1>
  <p class="between">(Between 1 and 20)</p>
  <button class="btn again">Again!</button>
  <div class="number">?</div>
</header>
<main>
  <section class="left">
    <input type="number" class="guess" />
    <button class="btn check">Check!</button>
  </section>
  <section class="right">
    <p class="message">Start guessing...</p>
    <p class="label-score">💯 Score: <span class="score">20</span></p>
    <p class="label-highscore">
      🥇 Highscore: <span class="highscore">0</span>
    </p>
  </section>
</main>

JavaScript部分（修改后的版本）

// 初始化变量
let randomNumber = Math.trunc(Math.random() * 20 + 1);
const number = document.querySelector('.number');
const checkButton = document.querySelector('.check');
const message = document.querySelector('.message');
const scoreElement = document.querySelector('.score');
const againButton = document.querySelector('.again');
const guessInput = document.querySelector('.guess');
let currentScore = 20;

// Check按钮点击事件
checkButton.addEventListener('click', function () {
  const inputNumber = Number(guessInput.value);

  // 1. 处理空输入
  if (!inputNumber) {
    message.textContent = 'No number was picked!';
  } 
  // 2. 猜对的情况
  else if (inputNumber === randomNumber) {
    message.textContent = 'Correct!';
    number.textContent = randomNumber;
    document.body.style.background = 'green';
    checkButton.disabled = true; // 猜对后也禁用按钮，避免重复点击
  } 
  // 3. 猜错的情况
  else {
    if (currentScore > 1) {
      message.textContent = inputNumber > randomNumber ? 'Too high' : 'Too low';
      currentScore--;
      scoreElement.textContent = currentScore;
    } 
    // 4. 用完所有次数的情况
    else {
      message.textContent = 'Game Over! You used all 20 tries.';
      currentScore = 0;
      scoreElement.textContent = currentScore;
      checkButton.disabled = true; // 禁用Check按钮
    }
  }

  // 每次点击后重置输入框（需求1实现）
  guessInput.value = '';
});

// Again按钮重置功能（新增）
againButton.addEventListener('click', function () {
  // 重置随机数
  randomNumber = Math.trunc(Math.random() * 20 + 1);
  // 重置分数
  currentScore = 20;
  scoreElement.textContent = currentScore;
  // 重置输入框
  guessInput.value = '';
  // 启用Check按钮
  checkButton.disabled = false;
  // 重置提示消息
  message.textContent = 'Start guessing...';
  // 重置页面样式和数字显示
  number.textContent = '?';
  document.body.style.background = ''; // 恢复默认背景
});

关键修改说明： #

• 把输入框重置代码guessInput.value = '';放到了Check按钮点击事件的最后，确保每次点击后都会清空输入框。
• 在猜错的逻辑里新增了判断：当currentScore减到1的时候，再错一次就会触发游戏结束，设置分数为0并禁用按钮。
• 给「Again!」按钮添加了完整的重置逻辑，让游戏可以重新开始，包括启用Check按钮、生成新随机数等。
• 优化了变量命名（比如把score改成scoreElement，currentNumber改成currentScore），让代码更易读。

这样你的两个需求就都实现啦～试试看吧！

备注：内容来源于stack exchange，提问作者MarniD