Is there a way to make sure a variable doesn't change after a page refreshes?

Question

I'm making a number guessing game using randomly generated numbers but when you make a guess the number changes and I want it to stay the same until the number is guessed correctly. This is what the code looks like and I don't understand why the number changes after every guess.

<!DOCTYPE html> 
<html> 
<head> 
<title>Number Guessing Game</title> 

</head> 

<body> 
<h1>Guess The Number</h1> 

<p>A number has been randomly generated from 1- 50. Please try and     guess the number.</p> 

<form> 
<label for="guessField">Enter a guess: </label> 
<input type = "text" id = "guessField" class = "guessField"> 
<input type = "submit" value = "Submit guess"
    class = "guessSubmit" id = "submitguess"> 
</form> 

<script> 
// for some reason a new random number is generated after every guess
const randomnumber = Math.floor(Math.random()*50) +1;  

var guess = 0; 

document.getElementById("submitguess").onclick = function(){ 

var userguess = document.getElementById("guessField").value; 

if(userguess<1||userguess>50||isNaN(userguess)){
guess+=1;
alert("That is not a valid guess.")
}

else if(userguess == randomnumber) 
{    
alert("You got it in "
        + guess + " guess(es) "); 
} 
else if(userguess > randomnumber) 
{    
guess+= 1; 
alert("That guess is too high. Try again!"); 
} 
else 
{ 
guess+=1; 
alert("That guess is too low. Try again!") 
} 
} 

//this shows that it changes after every guess 
document.write(randomnumber)
</script> 

</body> 
</html>

you need to disable form submission that is refreshing the page — Temani Afif, May 13 '19 at 22:54

score 0 · Accepted Answer · answered May 13 '19 at 22:58

0

Change <input type="submit" .. > to <button type="button" .. >. The submit button is submitting the page and causing a reload.

answered May 13 '19 at 22:58

AaronHolland

1,595
1
16
32

score 0 · Answer 2 · answered May 13 '19 at 22:59

Replace

<input type="submit" value="Submit guess" class="guessSubmit" id="submitguess">

with

<button type="button" class="guessSubmit" id="submitguess">Submit guess</button>

so you don't get a form submit when you click the button (and thus, a page reload which resets all Javascript).

Next, you need to cast that input field's value to a Number (input field values are always Strings) for comparison with numbers:

var userguess = parseInt(document.getElementById("guessField").value);

Is there a way to make sure a variable doesn't change after a page refreshes?

2 Answers2