猜数字功能故障求助：随机数输出异常及判断逻辑失效

核心问题分析 #

• 缺少用户输入入口：HTML中没有提供输入数字的控件，nombreChoisi错误获取了按钮的文本内容（"Vérifier nombre"），而非用户输入的数字。
• 变量初始化错误：nombreChoisi、champErreur等变量在页面加载时就获取了元素的innerHTML值，而非元素本身，后续赋值无法更新页面显示；且未在按钮点击时实时获取用户输入。
• 类型不匹配：用字符串（按钮文本）和数字（随机数）进行比较，导致逻辑判断完全失效。
• 随机数生成逻辑混乱：全局变量nb提前生成随机数，genererNbAleatoire函数未使用传入的min/max参数，且未正确重置随机数。
• 判断逻辑不完整：未处理用户输入与随机数相等的场景。

修复后的完整代码 #

HTML部分

<!-- 添加数字输入框，限制输入范围 -->
<input type="number" id="userInput" min="0" max="100" placeholder="输入0-100之间的数字">
<input type="button" id="btnGo" value="Vérifier nombre">
<input type="button" id="btnReset" value="Réinitialiser jeu">
<input type="button" id="btnNbEssais" value="Connaitre nombre d'essais">

<p id="error" class="erreur"></p>
<p id="info"></p>

JavaScript部分

window.addEventListener("load", genererNbAleatoire)

const min = 0;
const max = 100;
let nb; // 全局存储随机数
let essais = 0; // 记录尝试次数

// 绑定事件监听
document.getElementById('btnGo').addEventListener("click", verifierNombre);
document.getElementById('btnReset').addEventListener("click", reinitialiserJeu);
document.getElementById('btnNbEssais').addEventListener("click", connaitreNbEssais);

// 存储DOM元素引用（而非初始innerHTML）
const userInput = document.getElementById('userInput');
const champErreur = document.getElementById("error");
const champInfo = document.getElementById("info");

// 生成指定范围的随机数
function genererNbAleatoire() {
  nb = Math.floor(Math.random() * (max - min + 1)) + min;
  console.log("随机数已生成：", nb); // 第29行输出随机数，验证逻辑
  return nb;
}

function verifierNombre() {
  essais++;
  const nombreChoisi = parseInt(userInput.value);

  // 验证输入合法性
  if (isNaN(nombreChoisi) || nombreChoisi < min || nombreChoisi > max) {
    champErreur.textContent = `请输入${min}-${max}之间的有效数字`;
    champInfo.textContent = "";
    return;
  }

  // 核心判断逻辑
  if (nombreChoisi < nb) {
    champErreur.textContent = "Le nombre est trop petit";
    champInfo.textContent = "";
  } else if (nombreChoisi > nb) {
    champErreur.textContent = "Le nombre est trop grand";
    champInfo.textContent = "";
  } else {
    champErreur.textContent = "";
    champInfo.textContent = `恭喜！你猜对了，一共尝试了${essais}次`;
  }
}

function reinitialiserJeu() {
  genererNbAleatoire();
  essais = 0;
  userInput.value = "";
  champErreur.textContent = "";
  champInfo.textContent = "";
}

function connaitreNbEssais() {
  champInfo.textContent = `你已经尝试了${essais}次`;
}

关键修复点说明 #

1. 新增输入控件：添加type="number"的输入框，限制输入范围0-100，确保用户输入有效数字。
2. 修正变量存储：直接存储DOM元素对象，后续通过textContent更新页面内容，解决无法显示提示的问题。
3. 实时获取输入：在点击验证按钮时才获取用户输入，并转为整数类型，避免字符串与数字的比较错误。
4. 重构随机数生成：在genererNbAleatoire函数内正确计算随机数，页面加载和重置时都会重新生成，确保随机数有效性。
5. 完善逻辑分支：补充输入合法性验证，以及猜对数字的提示，同时增加尝试次数统计功能。

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