Question 11229 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Javascript identical if else statements behaving differently /not outputting HTML – Jquery

I am new to JS and was trying to practice conditionals when I ran into this really weird problem.
Each conditional is working as intended in the sense that when the desired condition is met, the code is executed, for example, console.log() is outputting exactly what I want it to but trying to output the same to HTML is not working for some reason.

My code:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

    <title>Tester</title>
  </head>

  <body>
    <p id="test"></p>
    <script>
      const max = 5;
      const ranNumber = Math.floor(Math.random() * max) + 1;
      console.log(ranNumber);
      let correct = false;
      while (!correct) {
        let guess = prompt("Guess a Number 1 - " + max);
        guess = Number(guess);
        if (guess === ranNumber) {
          correct = true;
          $("#test").html("Your guess was correct!");
        } else if (guess > ranNumber) {
          $("#test").html("Your guess was too high!");
        } else {
          document.getElementById("test").innerHTML = "Your guess too low!";
        }
      }
    </script>
  </body>
</html>

Now, I am using Jquery to write the HTML to the p tag but I also tried it like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Tester</title>
  </head>

  <body>
    <p id="test"></p>
    <script>
      const max = 5;
      const ranNumber = Math.floor(Math.random() * max) + 1;
      console.log(ranNumber);
      let correct = false;
      while (!correct) {
        let guess = prompt("Guess a Number 1 - " + max);
        guess = Number(guess);
        if (guess === ranNumber) {
          correct = true;
          document.getElementById("test").innerHTML = "Your guess was correct!";
        } else if (guess > ranNumber) {
          document.getElementById("test").innerHTML =
            "Your guess was too high!";
        } else {
          document.getElementById("test").innerHTML = "Your guess too low!";
        }
      }
    </script>
  </body>
</html>
Tags:

2

Answers


  1. 0

    Your page can’t load while you’re in the while loop and using prompt halts your javascript until it gets an input. Here’s a link to a similar question that was asked:
    https://www.reddit.com/r/webdev/comments/p8vod8/very_new_to_js_why_does_the_html_text_not_load/

    A much better way which is also pretty easy is using an input field and a button. the onclick option runs your function

    <input type="number" id="input">
<button onclick="guess()">Guess</button>

    And your javascript can look like this

    const max = 5
const ranNumber = Math.floor(Math.random() * max) + 1
console.log(ranNumber)
function guess(){
     let input = document.getElementById('input').value
     let text = document.getElementById('test')
     if(input == ranNumber){
       text.innerHTML = "You guessed it!"
     }
     else{
       text.innerHTML = "Wrong!"
     }
   }
    Login or Signup to reply.
  2. 0

    The fact that yr code does work! can be seen in the debugger,

    but only that the loop runs to fast that you can’t see it,

    Congrats, for your use of 'const, Number(),' guess === ranNumber assignment operator given that, you say U are new to JS

    enter image description here
    So to output it to Html, you would need a little bit of adjustment!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search