CODEWITHSUNDEEP
javascripthtmlcss
O.Bebars
O.Bebars

Reputation: 43

How to generate a random number on page load?

I'm trying to generate a random number when the page loads, but it doesn't seem to work for some reason. The random number just keeps on being generated every time the user presses the submit button and not only once from the beginning of the page load.

My HTML:

<!DOCTYPE html>
 <html>
  <head>
   <title> How many fingers </title>
   <script type="text/javascript" src="main.js"> </script>
 </head>

  <body>
   <h1> Test your luck </h1>
   <h2> How many fingers do I have?<h2>
   <input type="text" id="myGuess">
   <button id="button" onclick="check()"> submit </button>
</body>
</html>

My JavaScript:

function loadNumber(){
   var myNumber = (Math.floor(Math.random()*10) +1);
 }
 //am not sure if the above function should generate the random number!
 window.onload = loadNumber;

function check(){

  var numberOfGuesses = (Math.floor(Math.random()*9)+1);
  var guess = document.getElementById("myGuess").value;
  var number = (Math.floor(Math.random()*10) +1);

  if(guess==number){
      alert("correct, it took you " + numberOfGuesses + " guesses to get it 
       right")
      document.location.reload();
   }else{
    numberOfGuesses++;
    alert("nope, try again!")
  }
}

Upvotes: 4

Views: 5049

Answers (6)

O.Bebars
O.Bebars

Reputation: 43

Thank you all for the amazing support. Below is my final working code:

My Javascript:

var myNumber;
var numberOfGuesses = 1;

function loadNumber(){
  myNumber = (Math.floor(Math.random()*10) +1);
}

window.onload = loadNumber;

function check(){
  var guess = document.getElementById("myGuess").value;

  if(guess==myNumber){
     alert("correct, it took you " + numberOfGuesses + " guesses to get it 
      right")
     document.location.reload();
   } else {
     numberOfGuesses++;
     alert("nope, try again!")
   }

 }

My HTML:

 <!DOCTYPE html>
<html>
 <head>
   <title> Guess Game </title>
   <script type="text/javascript" src="main.js"> </script>
 </head>

 <body>
    <h1> Test your luck </h1>
    <h2> How many fingers Am I holding up?<h2>
    <input type="text" id="myGuess">
    <button id="button" onclick="check()"> submit </button>
  </body>
</html>

Upvotes: 0

Wiplash
Wiplash

Reputation: 65

I am very confused by your code really. So I restructured it to bring myNumber and numberOfGuesses outside of the functions, in order to broaden the scope. On page load it generates the random number in loadNumber() which is in the root scope here. Then check can access that and incriment guesses.

var myNumber;
var numberOfGuesses = 0;

function loadNumber(){
   myNumber = (Math.floor(Math.random()*10) +1);
}

function check(){
  numberOfGuesses++;

  var guess = document.getElementById("myGuess").value;

  if(guess==myNumber){
      alert("correct, it took you " + numberOfGuesses + " guesses to get it 
       right")
      document.location.reload();
   } else {
    alert("nope, try again!")
  }

}

window.onload = loadNumber;

Upvotes: 5

Daniel K&#252;tt
Daniel K&#252;tt

Reputation: 43

The random number was changing, because you were generating a new random number every button click. Also the myNumber variable that you generate in loadNumber() was not available outside the function's scope and it was not used in the button's onClick function.

In the snippet below I transported the declaration of myNumber outside the function so that the both functions could access it and also constructed the guesses counter (with a starting value of 0)

var myNumber;
var numberOfGuesses = 0;

function loadNumber() {
   myNumber = Math.floor(Math.random() * 10) + 1;
}

function check() {
    numberOfGuesses++;
    var guess = document.getElementById("myGuess").value;
    if (guess == myNumber) {
        alert("correct, it took you " + numberOfGuesses + " guesses to get it right");
        document.location.reload();
    } else {
        alert("nope, try again!");
    }
}

loadNumber();
<!DOCTYPE html>
<html>
<head>
    <title>How many fingers</title>
    <script type="text/javascript" src="main.js"> </script>
</head>

<body>
    <h1>Test your luck</h1>
    <h2>How many fingers do I have?<h2>
    <input type="text" id="myGuess">
    <button id="button" onclick="check()">submit</button>
</body>
</html>

Upvotes: 0

Alien426
Alien426

Reputation: 1277

Put var myNumber = 0, numberOfGuesses = 0; outside both functions so it is a global variable that can be accessed in both functions.

Inside check() you can increment the number of guesses by putting numberOfGuesses++; and compare against the global variable myNumber instead of number.

Upvotes: 0

ymz
ymz

Reputation: 6924

 var numberOfGuesses = (Math.floor(Math.random()*9)+1);
 var guess = document.getElementById("myGuess").value;
 var number = (Math.floor(Math.random()*10) +1);

 function check() {

  if(guess==number){
      alert("correct, it took you " + numberOfGuesses + " guesses to get it right")
   }else{
    numberOfGuesses++;
    alert("nope, try again!")
  }

}

Upvotes: 0

Constantin Chirila
Constantin Chirila

Reputation: 2119

On line 14 document.location.reload(); you are reloading the page and recalling the random number function, hence regenerating a new number.

Upvotes: 2

Related Questions