当我在 Javascript 中将变量设置为 0 时页面不加载答案

【问题标题】：Page doesn't load when I set variable to 0 in Javascript当我在 Javascript 中将变量设置为 0 时页面不加载
【发布时间】：2026-02-10 18:55:02
【问题描述】：

var randomNumber = Math.floor(Math.random() * 6);
    var attempts = 0 
    var maximum = 3
    
    while (attempts < maximum){
        document.getElementById("submit").onclick = function() { 
            attempts += 1;
                if (document.getElementById("input").value == randomNumber) {
                    alert("You chose the right number");
                } else {
                    alert("WRONG Number! You have " + attempts + " attempts.");
            }
        }
    }

<input type="text" id="input">
 <button id="submit">Submit</button>

在学习如何使用随机数生成器时，我想添加一个 while 循环并尝试 3 次从随机数中进行选择。当我创建一个变量来设置尝试次数时，如果我使变量等于 0，我的页面不会加载，但如果我将变量留空而没有值，则脚本不会运行。

对为什么会发生这种情况有任何想法吗？

var randomNumber = Math.floor(Math.random() * 6);
    var x = 0
    var maximum = 3
    
    while (x < maximum){
        document.getElementById("submit").onclick = function() { 
            attempts += 1;
                if (document.getElementById("input").value == randomNumber) {
                    alert("You chose the right number");
                } else {
                    alert("WRONG Number! You have " + attempts + " attempts.");
            }
        }
    }

  <input type="text" id="input">
  <button id="submit">Submit</button>

【问题讨论】：

页面没有加载，因为 while(x
你永远不会在循环内改变x（或maximum），所以循环永远不会结束。
附言。为避免将来在 SO 上询问此类琐碎的小错误，请考虑学习 how to debug small programs。如果您查看自己代码的时间过长，很容易对自己的代码中的错误视而不见，但如果您逐行查看代码的作用 explained to a rubber duck，您可能很容易发现这个错误。或者在浏览器的 JS 调试器中单步执行。
对不起，我在将代码发布到此处之前对代码进行了一些更改。变量名是尝试。在 While 循环的第二行添加 attempts += 1 以增加数字。（检查更新后的帖子）但即使尝试次数从未增加并且变量始终保持在 0，我认为它不应该是错误或无限循环，它只是使循环始终为 True 允许始终工作。
它仍然是一个无限循环。为什么不试试橡皮鸭法，看看你能不能自己弄清楚为什么？（提示：attempts += 1 行在哪里？何时执行？）

标签： javascript while-loop var

【解决方案1】：

您的while 循环在页面加载期间同步运行。脚本永远不会结束，因为while 循环的条件永远不会被否定，因此控制权永远不会交还给浏览器以重新绘制页面，因此用户永远没有机会输入数字或单击按钮。

虽然您可以通过承诺 onclick 和 await 承诺继续使用 while，但最好在外部创建一次处理程序，并让 it 检查尝试是否已满。

您还需要使用一致的变量名：使用x 或attempts，不能同时使用：

var randomNumber = Math.floor(Math.random() * 6);
var attempts = 0
var maximum = 3

document.getElementById("submit").onclick = function() {
  if (attempts >= maximum) return;
  attempts += 1;
  if (document.getElementById("input").value == randomNumber) {
    alert("You chose the right number");
  } else {
    alert("WRONG Number! You have " + attempts + " attempts.");
  }
}

<input type="text" id="input">
<button id="submit">Submit</button>

【讨论】：

【解决方案2】：

您可以在达到最大尝试次数后禁用该按钮，例如：

var randomNumber = Math.floor(Math.random() * 6);
var attempts = 0;
var maximum = 3;

document.getElementById("submit").onclick = function(e) {
  attempts += 1;
  if (document.getElementById("input").value == randomNumber) {
    alert("You chose the right number");
  } else {
    alert("WRONG Number! You have " + attempts + " attempts.");
  }
  if (attempts === maximum) e.target.disabled = true;
};

<input type="text" id="input" />
<button id="submit">Submit</button>

【讨论】：