JavaScript中点击prompt弹窗取消按钮时如何正确关闭弹窗？

原有代码的核心错误 #

• 取消判断逻辑完全失效：判断条件写的是prompt == null，prompt是浏览器内置的弹窗API函数本身，永远不会等于null；且判断前就对输入值执行了parseInt转换，用户点击取消时prompt返回的null会被转成NaN，彻底覆盖了取消状态的标识，根本无法触发取消分支。
• 次数统计逻辑错误：numTries = numTries++属于无效写法，后置自增运算符会先返回变量自增前的原值，赋值后变量数值始终不会变化，无法正确统计猜测次数。
• 循环逻辑缺失：猜错后的循环内只弹出错误提示，没有重新唤起prompt让用户输入新的猜测值，要么循环不执行，要么直接陷入死循环。
• 边界处理缺失：没有做输入值合法性校验，用户输入非数字内容时会直接触发异常逻辑。

修复后完整代码 #

const targetNum = 4;
let numTries = 0;
let numGuess;

while (numTries < 3) {
  numGuess = prompt(`Guess the number I am thinking of (between 1 and 10):`);
  // 优先判断取消操作，点取消直接结束游戏
  if (numGuess === null) {
    alert(`Game exited. Press F5 to play again.`);
    break;
  }
  // 转换输入值为数字
  numGuess = parseInt(numGuess);
  // 校验输入合法性
  if (isNaN(numGuess) || numGuess < 1 || numGuess > 10) {
    alert(`Please enter a valid integer between 1 and 10.`);
    continue;
  }
  numTries++;
  // 猜对逻辑
  if (numGuess === targetNum) {
    alert(`Correct! You guessed the number in ${numTries} ${numTries === 1 ? 'try' : 'tries'}! Press F5 to play again.`);
    break;
  }
  // 猜错逻辑
  if (numTries < 3) {
    alert(`Incorrect guess. You have ${3 - numTries} ${3 - numTries === 1 ? 'chance' : 'chances'} left. Try again.`);
  } else {
    alert(`All 3 chances used up. The correct number is ${targetNum}. Press F5 to play again.`);
  }
}

关键实现说明 #

• 每次弹出输入框后第一时间判断返回值是否为null，匹配到用户点击取消的操作时直接弹出提示、终止游戏逻辑，不会执行后续的数字转换、猜测判断流程，实现点取消就退出的效果。
• 将parseInt转换放在取消判断之后，避免null被转成NaN导致取消状态识别失败。
• 修正次数递增写法，去掉无效的赋值操作，直接使用numTries++完成次数统计。
• 把输入弹窗放在循环内部，每次猜错后可以重新唤起输入框，补全了非法输入提示、剩余次数提示、机会耗尽提示，流程更完整。

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