使用RNG比较仅返回Else变量，高低猜数游戏开发遇技术问题

嘿，我帮你排查出问题啦！你现在的核心问题是：随机数只在页面加载时渲染到了页面上，但没有把这个随机数保存成可复用的变量。后面点击按钮比较时，要么没用到这个已经生成的随机数，要么不小心重新生成了新的，导致比较逻辑总是走else分支。

下面是修正后的完整代码，我给你标了关键修改点：

<html>
<body>
  <p id="rngout"></p>
  <input type="number" id="userGuess" placeholder="输入1-10的数字">
  <p id="comparison"></p>
  <button id="submit">Compare</button>

  <script>
    // 1. 先声明一个全局变量存随机数，这样点击按钮时能拿到它
    let randomNumber;

    window.onload = function() {
      // 2. 生成随机数后，同时存到变量和页面上
      randomNumber = Math.floor(Math.random() * 10 + 1);
      document.getElementById("rngout").innerHTML = `随机数已生成：${randomNumber}`;
    }

    // 3. 给按钮绑定点击事件，处理猜数逻辑
    document.getElementById("submit").addEventListener("click", function() {
      // 获取用户输入，记得转成数字类型（输入框默认是字符串）
      const userInput = parseInt(document.getElementById("userGuess").value);
      const resultBox = document.getElementById("comparison");

      // 先校验输入是否合法
      if (isNaN(userInput) || userInput < 1 || userInput > 10) {
        resultBox.innerHTML = "*请输入1-10之间的有效数字哦*";
        return;
      }

      // 4. 用之前保存好的随机数做比较
      if (userInput > randomNumber) {
        resultBox.innerHTML = "猜大了！再试试~";
      } else if (userInput < randomNumber) {
        resultBox.innerHTML = "猜小了！再试试~";
      } else {
        resultBox.innerHTML = "*恭喜你猜对啦！🎉*";
        // 猜对后自动生成新随机数，游戏可以继续玩
        randomNumber = Math.floor(Math.random() * 10 + 1);
        document.getElementById("rngout").innerHTML = `新的随机数已生成：${randomNumber}`;
        document.getElementById("userGuess").value = "";
      }
    });
  </script>
</body>
</html>

几个重要的修改说明： #

• 保留随机数变量：把生成的随机数存到randomNumber里，而不是只显示在页面，这样每次比较用的都是同一个随机数，不会乱变。
• 输入类型转换：用parseInt把输入框的字符串转成数字，不然字符串和数字比较会出bug（比如"10" > 9会因为字符串比较规则变成false）。
• 输入合法性校验：防止用户输入非数字或者超出1-10范围的内容，避免逻辑混乱。
• 完善游戏体验：猜对后自动刷新随机数、清空输入框，不用手动刷新页面就能继续玩。

你把这段代码替换原来的，测试一下应该就能正常工作啦！

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