Errors With Faulty Code On Number Guessing Game

Question

Battlecode10 0 Newbie Poster

3 Years Ago

I am currently using HTML and Javascript to create a number guessing game. The issue with my current code is that any number the user inputs is a number that is ruled as the correct number. The problem is that the random number generator is not being recognized for some reason. The game is simply supposed to pick a number from 1-100 and the user has to keep guessing a number to match the randomly generated number. And it should be able to reset once you click the new game button. I am just wondering how to resolve the issues with my code and how to get my desired output. Here's my code: https://jsfiddle.net/qg0froam/

  <!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width,initial-scale=1">
           <title>Homework 6</title>
          <script src="hw06.js"></script>
          <link rel="stylesheet" href="hw06.css">
      </head>
    <body onload="newgame()">
          <h1>High-low guessing game</h1>
          <div id="controls">
          <button onclick="newgame()">New game</button>
          <form onsubmit="guess(); return false;"><input id="guess_input" type="number">
          <input type="submit" value="Guess"></form>
          </div>
          <br><br>
          <div id="output"></div>
      </body>
  </html>

================================================================================================================================

var output;     // Global variable to reference the div element with id "output"
  var answer;     // This is the answer
  var guessCount = 1; // This variable counts the number of guesses
  var x = document.getElementById("guess_input"); // This is the number guessed by the user

   // Function that returns a random number in [minVal, maxVal].
   function randomNumber(minVal, maxVal) {
       return minVal + Math.floor(Math.random() * (maxVal - minVal + 1));
   }

 // Function that writes a message to the output div
  function writeOutput(message) {
      if (!output) {
          output = document.getElementById("output");
      }
      output.innerHTML = message + "<br>" + output.innerHTML;
  }

  // Function that starts a new game
      function newgame() {
      writeOutput("I'm thinking of a number between 1   and 100...");

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

      var guessCount = 0;

      // TODO: use the randomNumber function to pick an answer for this game.
  }

  // Function that checks the player's guess against the answer

  function guess() {


  if(x == answer)
   {    
       writeOutput("Congratulations! You guessed the number correctly! "
               + guessCount + " Guesses ");
   }
   else if(x > answer) /* if guessed number is greater
                   than actual number*/ 
   {    
       guessCount++;
       writeOutput("The guess is incorrect! Try a lower number");
   }
   else
   {
       guessCount++;
       writeOutput("The guess is incorrect!! Try a higher number")
   }

      // TODO: look at the value of guess_input, compare it with the answer, and
      // tell the player whether the guess is too low, too high, or correct.
  }

javascript

3 Contributors
3 Replies
128 Views
2 Days Discussion Span
Latest Post 3 Years Ago Latest Post by Biiim

rproffitt 2,662 "Nothing to see here."

3 Years Ago

As I follow the code, at line 35 both x and answer are undefined so this comparison would be true and why the comparison is true.

Battlecode10 commented: How would I properly define it in this code? I'm not sure how to do it with external Javascript. +0

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

How would I properly define it in this code? I'm not sure how to do it with external Javascript.

rproffitt 2,662 "Nothing to see here." Moderator · Answer 1 · 2021-10-12T03:30:59+00:00

If I were to guess you would fetch "answer" from the web object. As to x? Why not call the rando?

Biiim 182 Junior Poster · Answer 2 · 2021-10-14T15:00:50+00:00

function newgame() {
    writeOutput("I'm thinking of a number between 1   and 100...");

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

    var guessCount = 0;

    // TODO: use the randomNumber function to pick an answer for this game.
}

You need to remove the "var", this makes the variables local inside the function and not global, so it doesn't set the global one.

function newgame() {
    writeOutput("I'm thinking of a number between 1   and 100...");
    answer = Math.floor(Math.random() * 100 + 1);
    guessCount = 0;
}

The console on the web browser is your best friend ctrl + shift + j (chrome) ctrl + shift + k (firefox)

you can type "answer" while you are on the page and it tells you what the value of it is, you can even write JS direct in there and test things before writing it into your document.

Edit: there were 2 more things to change to make it work, below works in chrome:

<!DOCTYPE html>
   <html lang="en">
       <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width,initial-scale=1">
           <title>Homework 6</title>
          <script src="hw06.js"></script>
          <link rel="stylesheet" href="hw06.css">
          <script type="text/javascript">
          var output;     // Global variable to reference the div element with id "output"
  var answer;     // This is the answer
  var guessCount = 1; // This variable counts the number of guesses


   // Function that returns a random number in [minVal, maxVal].
   function randomNumber(minVal, maxVal) {
       return minVal + Math.floor(Math.random() * (maxVal - minVal + 1));
   }

 // Function that writes a message to the output div
  function writeOutput(message) {
      if (!output) {
          output = document.getElementById("output");
      }
      output.innerHTML = message + "<br>" + output.innerHTML;
  }

  // Function that starts a new game
function newgame() {
    writeOutput("I'm thinking of a number between 1   and 100...");
    answer = Math.floor(Math.random() * 100 + 1);
    guessCount = 0;
}

  // Function that checks the player's guess against the answer

  function guess() {


  if(x.valueAsNumber == answer)
   {    
       writeOutput("Congratulations! You guessed the number correctly! "
               + guessCount + " Guesses ");
   }
   else if(x > answer) /* if guessed number is greater
                   than actual number*/ 
   {    
       guessCount++;
       writeOutput("The guess is incorrect! Try a lower number");
   }
   else
   {
       guessCount++;
       writeOutput("The guess is incorrect!! Try a higher number")
   }

      // TODO: look at the value of guess_input, compare it with the answer, and
      // tell the player whether the guess is too low, too high, or correct.
  }
          </script>
      </head>
    <body onload="newgame()">
          <h1>High-low guessing game</h1>
          <div id="controls">
          <button onclick="newgame()">New game</button>
          <form onsubmit="guess(); return false;"><input id="guess_input" type="number">
          <input type="submit" value="Guess"></form>
          </div>
          <br><br>
          <div id="output"></div>
          <script>var x = document.getElementById("guess_input"); // This is the number guessed by the user</script>
      </body>
  </html>

When you do a document.getElementById you need to make sure the JS code comes AFTER the HTML element is on the page, otherwise it just is undefined as it didn't exist when the code was ran.

The other change was x.valueAsNumber as x is an element, not the contents of the element.