JS猜数字游戏数组索引与值显示异常，请求技术排查

问题根源 #

1. 数组作用域错误：guesses数组在do_guess()函数内部声明，每次调用函数都会新建空数组，之前的猜测记录完全丢失；而且你在函数开头和分支里各执行了一次push(guess)，导致每次数组长度固定为2。
2. 重复存储猜测值：同一个猜测被重复添加到数组里，导致记录错误。
3. 类型不匹配：输入框的value是字符串类型，直接和数字num比较会引发隐式类型转换问题。
4. 冗余的范围判断：多个范围判断逻辑重复，可以合并简化。

修正后的代码 #

// 全局存储所有猜测记录，避免每次调用函数重置
const guesses = [];
// 初始化随机数和范围上限（根据你的实际逻辑调整）
let num = Math.floor(Math.random() * 100) + 1;
let input = 100;

function do_guess() {
  const guessInput = document.getElementById("guess");
  // 将输入值转为数字，同时校验是否为有效数字
  const guess = Number(guessInput.value);
  const message = document.getElementById("message");

  // 清空输入框，提升用户体验
  guessInput.value = "";

  // 统一校验输入有效性
  if (isNaN(guess) || guess < 1 || guess > Math.ceil(input)) {
    message.textContent = `输入无效，请输入1到${Math.ceil(input)}之间的数字！`;
    return; // 无效输入不存入猜测记录
  }

  // 仅存入一次当前有效猜测
  guesses.push(guess);

  // 判断猜测结果
  if (guess === num) {
    message.textContent = `猜对了！你一共猜了${guesses.length}次，所有猜测数值：${guesses.join(', ')}`;
    // 重置游戏，支持重新开始
    guesses.length = 0;
    num = Math.floor(Math.random() * 100) + 1;
  } else if (guess < num) {
    message.textContent = "猜小了，试试更大的数字。";
  } else {
    message.textContent = "猜大了，试试更小的数字。";
  }
}

关键修改说明 #

• 将guesses数组移到函数外部，确保所有猜测记录能被持续保存。
• 增加输入类型转换与有效性校验，避免无效值存入数组。
• 移除重复的push操作，每个有效猜测仅存入一次。
• 合并冗余的范围判断逻辑，让代码更简洁。
• 使用模板字符串和join()方法优化结果展示格式，提升可读性。
• 游戏结束后重置数组和随机数，支持新一轮游戏。

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