JavaScript if语句异常：点击Check按钮仅执行首个if代码块求助

核心问题 #

你将guessInput的取值逻辑放在了全局作用域，页面加载时就获取了输入框的初始值（空字符串转成Number后为0），点击按钮时不会重新读取输入框的最新内容，导致每次点击都会触发!guessInput的判断（0在布尔判断中为false，!0结果为true）。

修复方案 #

把输入框取值的代码移到点击事件的回调函数内部，确保每次点击按钮时都能获取输入框的最新值：

const checkBtn = document.querySelector(".check");
const againBtn = document.querySelector(".again");
const message = document.querySelector(".message");
let randomNumber = Math.floor(Math.random() * 20 + 1);
const secretNumber = document.querySelector(".secret-number");
const guessInputElement = document.querySelector(".guess"); // 提前保存元素引用

console.log(randomNumber);
secretNumber.textContent = randomNumber;

checkBtn.addEventListener("click", function () {
  const guessInput = Number(guessInputElement.value); // 每次点击时获取最新输入值
  if (!guessInput) {
    message.textContent = "No Number!";
    console.log("no number");
  } else if (guessInput === randomNumber) {
    message.textContent = "Correct!";
    console.log("correct");
  } else if (guessInput > randomNumber) {
    message.textContent = "Too high!";
    console.log("too high");
  } else if (guessInput < randomNumber) {
    message.textContent = "Too low";
    console.log("too low");
  }
});

额外说明：如果用户输入无效内容（如字母），Number()会返回NaN，!NaN结果同样为true，也会触发"No Number!"提示，这部分逻辑是合理的。

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