CODEWITHSUNDEEP
javascriptfunctiongetelementbyid
Emma Rakauskas
Emma Rakauskas

Reputation: 11

Why does the congratulations message not display in a div using document.getElementById

I've written the below code and need to change the window.alert messages so that they show in a div box instead. However, I've started with the initial congratulations message and it doesn't appear at all. Below is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<title> Hide And Seek </title>
<meta charset="utf-8">
<script>
var diamond;
var number_of_guesses;

diamond = Math.ceil(Math.random() * 10);

number_of_guesses = 0;

function check(guess) {
    if(diamond == guess)
    {
        // window.alert("Congratulations! You have found the diamond.");
        document.getElementById('messageBox').textContent = 'Congratulations! You have found the diamond!';
        
        again = window.prompt("Would you like to play another game? Enter Y or N.", "Y");
        
        if(again == "N" || again == "n")
        {
            window.alert("Thanks for playing. Goodbye.");
            window.close();
        }
        else
        {
            window.alert("The diamond has been hidden. You can now try again.");
            window.location.reload();
        }
    }
    else
    {
        number_of_guesses = number_of_guesses + 1;
        
        if(diamond < guess)
        {
            result = "lower"
        }
        else
        {
            result = "higher"
        }
        window.alert("Guess number " + number_of_guesses + " is incorrect. Diamond is " + result + ".");
    }
    if(number_of_guesses >= 3)
    {
        window.alert("Sorry, you have run out of guesses! The diamond was in box " + diamond);
        
        again = window.prompt("Would you like to play another game? Enter Y or N.", "Y");
        
        if(again == "N" || again == "n")
        {
            window.alert("Thanks for playing. Goodbye.");
            window.close();
        }
        else
        {
            window.alert("The diamond has been hidden. You can now try again.");
            window.location.reload();
        }
    }
}
</script>
</head>
<body>

<form name="hidenseek">
    <input id="box1" type="button" value="1" onClick="check(box1.value)">
    <input id="box2" type="button" value="2" onClick="check(box2.value)">
    <input id="box3" type="button" value="3" onClick="check(box3.value)">
    <input id="box4" type="button" value="4" onClick="check(box4.value)">
    <input id="box5" type="button" value="5" onClick="check(box5.value)"> <br>
    <input id="box6" type="button" value="6" onClick="check(box6.value)">
    <input id="box7" type="button" value="7" onClick="check(box7.value)">
    <input id="box8" type="button" value="8" onClick="check(box8.value)">
    <input id="box9" type="button" value="9" onClick="check(box9.value)">
    <input id="box10" type="button" value="10" onClick="check(box10.value)"> <p>
</form>

<h3 id="messageBox"> Click on the box of your choice. </h3>

</body>
</html>

I've changed all other window.alert messages to the same and they work fine, apart from the congratulations message

Upvotes: 0

Views: 60

Answers (1)

Nazar Hapak
Nazar Hapak

Reputation: 36

Just delay your congratulations alert by 10 ms and it should work just fine:

if (diamond == guess) {
      // window.alert("Congratulations! You have found the diamond.");
      document.getElementById("messageBox").innerHTML =
        "Congratulations! You have found the diamond!";

      setTimeout(() => {
        again = window.prompt(
          "Would you like to play another game? Enter Y or N.",
          "Y"
        );

        if (again == "N" || again == "n") {
          window.alert("Thanks for playing. Goodbye.");
          window.close();
        } else {
          window.alert(
            "The diamond has been hidden. You can now try again."
          );
          window.location.reload();
        }
      }, 100);
    }

Upvotes: 0

Related Questions