CODEWITHSUNDEEP
javascript
user3221658
user3221658

Reputation: 13

How to stop random number from regenerating?

I'm creating a kid's number guessing game where a random number (between 1 and 50) is generated and you have to keep guessing the number until you find that generated number. You receive feedback about whether your guess is too high or too low to better inform your guess. Below is the code I've come up with, but the problem is, I can't seem to pinpoint the random number. It seems as if the number is regenerated with every guess. How can I make it so that the same number is used for every guess until guessed correctly? 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form id ="game" action="javascript:void(checkGuess())">
        <p class="owlOne">I'm thinking of a number between 1 and 50.</p>
        <br class="clear" />
        <p class="owlTwo"><input id="guess" type="text"><input id="button" type="submit" value="Guess!"></p>
        <br class="clear" />
        <p class="owlOne"><span id="response">Can you guess what it is?</span></p>
    </form>

<script>
function checkGuess() {
    var guess = Number(document.getElementById('guess').value); // Assigns guessed number to variable.
    var number = Math.floor(Math.random() * 49 + 1); // Generates a random number between 1 and 50.

    // Guessed number is correct.
    if (guess == number) {
        document.getElementById("response").innerHTML= "Congratulations, you guessed correctly!";
    }

    // Guessed number is within 5 above.
    else if (guess > number && guess <= number+5) {
        document.getElementById("response").innerHTML= "You're so close! Just a little bit lower.";
    }

    // Guessed number is within 5 below.
    else if (guess < number && guess >= number-5) {
        document.getElementById("response").innerHTML= "You're so close! Just a little bit higher.";
    }

    // Guessed number is at least 1, but more than 5 below.
    else if (guess < number-5 && guess >= 1) {
        document.getElementById("response").innerHTML= "Too low! Guess again.";
    }

    // Guessed number is no more than 50, but less than 5 above.
    else if (guess > number+5 && guess <= 50) {
        document.getElementById("response").innerHTML= "Too high! Guess again.";
    }

    // Guessed number is not within the 1 - 50 range.
    else {
        document.getElementById("response").innerHTML= "Remember, the number I'm thinking of is between 1 and 50.";
    }
}
</script>

</body>
</html>

Any suggestions?

Upvotes: 0

Views: 1343

Answers (2)

Nimnam1
Nimnam1

Reputation: 513

Everytime you're calling the function it is redefining number to be a new Random number. If you move the declaration outside the function than it won't be redefined every time you call checkGuess;

Your code should look something like 

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

   function checkGuess() {
      // code
   }

However you should note, this puts number in the global scope, you can also do something like 

var checkGuess = (function(number) {
   return function(){
      // code that was in checkGuess(){

   } 
})(Math.floor(Math.random() * 49 + 1));

what this does is it returns your checkGuess function to the variable but now that code has access to the number variable because it is inside a closure.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816452

Move 

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

outside the function. Then the number will be generated only on page load, not every time the function is called.

number will become a global variable and also be accessible inside the function.

Upvotes: 1

Related Questions