[当我在Javascript中将变量设置为0时，页面不会加载

Question

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>

Answer 1

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

虽然您可以通过使onclick变为while并承诺一个来继续使用await，但最好一次在外部创建处理程序，并让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>

Answer 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>