JavaScript
x
33
33
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />6
<meta name="viewport" content="width=device-width, initial-scale=1.0" />7
<title>Higher Lower</title>8
</head>9
10
<body>11
<h1>Higher - Lower</h1>12
13
<!--maxNum Function-->14
<!-- <p>Please enter a maximum number:</p>15
<input type="text" id="maxNum" /><br /><br /> -->16
<button onclick="userInput()">Input Maximum Number</button>17
18
<p id="ranNum"></p>19
20
<p id="validation"></p>21
22
<!--higherLower Function-->23
<p>Your Guess:</p>24
<input type="text" onfocus="this.value=''" id="choice" /><br /><br />25
<button onclick="higherLower()">Guess</button>26
27
<p id="result"></p>28
29
<p id="values"></p>30
</body>31
<script src="scripts.js"></script>32
</html>33
JavaScript
1
36
36
1
let userMax;2
function userInput() {3
userMax = prompt("Please enter a maximum number:");4
5
while (userMax < 1 || isNaN(userMax)) {6
alert("Maximum number cannot be negative, zero, or non-numbers");7
userMax = userInput();8
}9
10
return userMax;11
}12
13
function isFloat(userMax) {14
return Number(userMax) === n && n % 1 !== 0;15
}16
17
function higherLower(choice) {18
// Declares random number variable19
var randomNumber=Math.floor(Math.random() * userMax) + 1;20
window.alert(randomNumber);21
22
// Declares user guess variable23
var guess=document.getElementById('choice').value;24
25
// Declares random number variable26
if(randomNumber==guess) {27
document.getElementById("result").innerHTML = "You got it!";28
}29
else if(randomNumber>=guess) {30
document.getElementById("result").innerHTML = "No, try a higher number.";31
}32
else if(randomNumber<=guess) {33
document.getElementById("result").innerHTML = "No, try a lower number.";34
}35
}36
I am creating a number guessing game based on the user inputting the maximum number. I was wondering how I could generate the random number only once until the user guesses correctly? I messed around with creating another function and nesting functions however I could not get anything solid to work. Currently, the button calls the main game function each time it is clicked and I do not want to add other buttons/inputs to solve this issue.
Advertisement
Answer
Place var randomNumber=Math.floor(Math.random() * userMax) + 1; outside of your function, and it should not be replaced when you call higherLower().
If the user guesses correctly, then set randomNumber to another Math.floor(Math.random() * userMax) + 1
So, your code should look like this:
JavaScript
1
38
38
1
let userMax;2
let randomNumber;3
function userInput() {4
userMax = prompt("Please enter a maximum number:");5
6
while (userMax < 1 || isNaN(userMax)) {7
alert("Maximum number cannot be negative, zero, or non-numbers");8
userMax = userInput();9
}10
randomNumber = Math.floor(Math.random() * Number(userMax)) + 1;11
return userMax;12
}13
14
function isFloat(userMax) {15
return Number(userMax) === n && n % 1 !== 0;16
}17
18
function higherLower(choice) {19
// Declares random number variable20
window.alert(randomNumber);21
22
// Declares user guess variable23
var guess=document.getElementById('choice').value;24
25
26
// Declares random number variable27
if(randomNumber==guess) {28
document.getElementById("result").innerHTML = "You got it!";29
randomNumber=Math.floor(Math.random() * Number(userMax)) + 1;30
}31
else if(randomNumber>=guess) {32
document.getElementById("result").innerHTML = "No, try a higher number.";33
}34
else if(randomNumber<=guess) {35
document.getElementById("result").innerHTML = "No, try a lower number.";36
}37
}38