当我在 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 learning how to use a random number generator, I wantd to add a while loop and give 3 attempts to choose from a random number. When I create a variable to set the number of attempts, if I make the variable equal to 0, my page doesn't load, but if I leave the variable empty without a value, the script doesn't run.

Any ideas of why this may be happening?

 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

Your while loop runs synchronously, during pageload. The script never finishes, because the while loop's condition is never negated, so control is never yielded back to the browser to repaint the page, so the user never has a chance to input a number or click on the button.

While you could keep using while by promisifying the onclick and await ing a Promise, it'd be better to create the handler outside, once, and have it check if the attempts are maxed out.

You also need to use consistent variable names: either use x or attempts , not both:

 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

You could disable the button after the maximum number of attempts has been reached, like:

 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>