Chrome运行猜数字JS代码时ii为NaN的原因（已用parseInt）

问题根源 #

• 变量ii的初始化时机错误：页面刚加载时，文本输入框是空的，parseInt("")会直接返回NaN，你把这个初始的NaN值存在了ii里，之后没有再更新它。
• 点击按钮的send函数中，没有重新读取用户当前输入的内容，始终使用页面加载时的那个NaN值进行判断。

修正后的代码 #

JavaScript 代码

// 生成1~100的随机整数
let num = parseInt(Math.random() * 100) + 1;
let i = document.querySelector("input[type='text']");
let sp = document.querySelector("span");
let count = 0;

function send() {
  count++;
  // 每次点击时重新读取并转换用户输入
  let ii = parseInt(i.value);
  // 额外判断：如果输入无效（比如非数字），提示用户
  if (isNaN(ii)) {
    sp.innerText = "请输入有效的数字！";
    return;
  }
  if (ii === num) {
    sp.innerText = `猜对了！一共猜了${count}次`;
  } else if (ii > num) {
    sp.innerText = "太大了";
  } else {
    sp.innerText = "太小了";
  }
}

HTML 代码

<input type="text" placeholder="输入1~100之间的整数">
<input type="button" value="猜数字" onclick="send()">
<h1>结果：<span></span></h1>

额外说明 #

• 增加了isNaN(ii)的判断，避免用户输入非数字内容时出现逻辑错误。
• 给querySelector添加了type='text'的限定，避免选中按钮类型的input，逻辑更严谨。

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