javascript - JS : How would I display a decrementing value through an html header?(及更多)

Question

基本上，我正在制作一个简单的 javascript/html 网页游戏，您可以在其中猜测一个数字，并且有 3 次猜对的机会。我在显示玩家剩余的尝试次数时遇到问题(卡在三次)。应该发生的颜色变化也没有发生。

刷新后也不会重置页面的显示(需要玩 5 次游戏才能重置)。

也许我的 for 循环/if 语句很奇怪？

这是我的代码。

var guesses = 3;
var random = Math.floor((Math.random() * 10) + 1);
//start the guessing
handleGuess(prompt("Pick a number to win the game!"));

function handleGuess(choice) {
guesses--; //subtract one guess
if (guesses > 0) {
if (choice != random) {
  document.body.style.backgroundColor = "#CC0000";
  var x = "";
  x = x + "You have " + guesses + " chances left" + "<br>";
  document.getElementById("demo").innerHTML = x;
} else {
  var x = "";
  x = x + "You win!" + "<br>";

  document.getElementById("demo").innerHTML = x;

  document.body.style.backgroundColor = "#009000";
  //return false; 
}
} else {
//running out of turns
var x = "";
x = x + "Game Over!" + "<br>";

document.getElementById("demo").innerHTML = x;

document.body.style.backgroundColor = "#FF0000";
//return false;

}
}

Answer 1

提示是一个阻塞事件，因此在出现提示之前您不会看到页面更新...请尝试下面的示例，其中 setTimeout用于允许延迟...

var guesses = 3;
var random = Math.floor((Math.random() * 10) + 1);
//start the guessing
handleGuess(prompt("Pick a number to win the game!"));

function handleGuess(choice) {
  guesses--; //subtract one guess
  if (guesses > 0) {
    if (choice != random) {
      document.body.style.backgroundColor = "#CC0000";
      var x = "";
      x = x + "You have " + guesses + " chances left" + "<br>";
      document.getElementById("demo").innerHTML = x;
      setTimeout(function() {
        handleGuess(prompt("Try again!"));
        },1000);//wait 1 second
    } else {
      var x = "";
      x = x + "You win!" + "<br>";

      document.getElementById("demo").innerHTML = x;

      document.body.style.backgroundColor = "#009000";
      //return false; 
    }
  } else {
    //running out of turns
    var x = "";
    x = x + "Game Over!" + "<br>";

    document.getElementById("demo").innerHTML = x;

    document.body.style.backgroundColor = "#FF0000";
    //return false;

  }
}

<h1 id="demo">You have 3 chances to guess the correct number.</h1>

<br>