jared___ jared___ - 1 month ago 9
HTML Question

JS: How would I display a decrementing value through an html header? (and more)

Basically, I'm making a simple javascript/html webpage game where you guess a number and you have three chances to guess correctly. I'm having a problem displaying the number of attempts a player has left (It gets stuck at three). The color change that is supposed to occur also doesn't happen.

It also doesn't reset the page's display after a refresh (it takes 5 playthroughs of the game to get it to reset).

Maybe my for loop/if statement is screwy?

Here's my code.

<!DOCTYPE html>
<html>
<body>

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

<input type ="radio" name ="difficulty" onclick = "ChangeDif(this.Difficulty, 'easy')">Easy <br>

<input type ="radio" name ="difficulty" onclick = "ChangeDif(this.Difficulty, 'medium')">Medium <br>

<input type ="radio" name ="difficulty" onclick = "ChangeDif(this.Difficulty, 'hard')">Hard <br>

<script>
/*function ChangeDif(Difficulty) {
var i = ""
if (Difficulty == 'easy'){
i = 10;
}
if (Difficulty == 'medium') {
i = 5;
}
if (Difficulty == 'hard') {
i = 3;
}

}
*/


var choice = prompt("Pick a number to win the game!");

var random = Math.floor((Math.random() * 10) +1);

//var num = 7;

for(i = 2; i > 0;i-- ) {
if(choice != random) {
document.body.style.backgroundColor = "#CC0000";
var x="";
x=x + "You have " + i + " chances left" + "<br>";

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

choice = prompt("Try again!");
//return false;
}

else {
//win
i = 0;

var x="";
x=x + "You win!" + "<br>";

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

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

if(i == 0) {
//running out of turns
var x="";
x=x + "Game Over!" + "<br>";

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

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

}

</script>

</body>
</html>

Answer

The prompt is a blocking event, so you don't see the page update until after the prompts... try the example below, where setTimeout is used to allow a delay...

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>

Comments