JavaScript if语句不生效排查：跟随Brad教程的猜数字项目求助

现象本质 #

你观察到的“首个if被忽略”是流程缺失导致的视觉错觉，并非if语句本身执行异常，这也是为什么你尝试改用switch、拆分独立if后问题依旧存在——问题和条件判断语法选型无关：

• 输入校验的if块（判断是否为合法数字、是否在1-10区间内）其实正常执行了，只是执行完错误提示后没有中断后续代码流程，直接带着非法的guess值进入了输赢判定环节，让你误以为校验逻辑被跳过。
• 代码中存在的两处隐性错误放大了异常表现：
  • 对用const声明的DOM常量guessInput直接赋值为空字符串guessInput = ''，这行代码本身就会触发类型报错，无法实现清空输入框的效果
  • 校验非法输入时没有给提示文字设置颜色，错误提示和正常提示样式无区分

修复方案 #

• 在输入校验的if分支内，执行完错误提示后添加return语句，直接中断整个点击事件的回调执行，非法输入场景下不再继续走后续的输赢判定逻辑 ——这是解决“if被忽略”错觉的核心操作
• 修正清空输入框的写法，改为操作DOM的value属性：guessInput.value = '' ——解决之前代码对const常量赋值的报错问题
• 给错误提示统一补充红色样式，优化用户感知

修复后完整可运行代码 #

HTML（与原代码一致，无需修改） #

<div class="container">
  <h1>The Number Guesser Game</h1>
  <div id="game">
    <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p>
    <input type="number" id="guess-input" placeholder="Enter Your Guess">
    <input type="submit" value="Submit" id="guess-btn">
    <p class="message"></p>
  </div>
</div>

JavaScript #

let min = 1,
  max = 10,
  winningGuess = 2,
  guessesNum = 3;

// Grab on UI Elements 
const game = document.querySelector('#game'),
  minNum = document.querySelector('.min-num'),
  maxNum = document.querySelector('.max-num'),
  guessInput = document.querySelector('#guess-input'),
  guessBtn = document.querySelector('#guess-btn'),
  message = document.querySelector('.message');

// Assign UI to min and Max
minNum.textContent = min;
maxNum.textContent = max;

// Add an EventListener
guessBtn.addEventListener('click', function() {
  let guess = parseInt(guessInput.value);

  // 输入合法性校验
  if (isNaN(guess) || guess < min || guess > max) {
    setMessage(`Please enter a Number between ${min} and ${max}`, 'red');
    // 核心修复：非法输入时中断后续流程
    return;
  }

  // 判定是否猜中
  if (guess === winningGuess) {
    gameOver(true, `Great Job ${winningGuess} is the Correct guess, You Won!`)
  } else {
    guessesNum -= 1;

    if (guessesNum === 0) {
      gameOver(false, `Sorry you lost, The correct guess was ${winningGuess}`)
    } else {
      guessInput.style.borderColor = 'red';
      setMessage(`${guess} is not the correct number, You have ${guessesNum} guesses left. Please try again`, 'red');
      // 修复：正确清空输入框
      guessInput.value = '';
    }
  }
});

function gameOver(won, msg) {
  let color = won ? 'green' : 'red';
  guessInput.disabled = true;
  guessInput.style.borderColor = color;
  message.style.color = color;
  setMessage(msg, color);
}

function setMessage(msg, color) {
  message.textContent = msg;
  message.style.color = color || 'black';
};

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