<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Higher Lower</title>
</head>
<body>
<h1>Higher - Lower</h1>
<!--maxNum Function-->
<!-- <p>Please enter a maximum number:</p>
<input type="text" id="maxNum" /><br /><br /> -->
<button onclick="userInput()">Input Maximum Number</button>
<p id="ranNum"></p>
<p id="validation"></p>
<!--higherLower Function-->
<p>Your Guess:</p>
<input type="text" onfocus="this.value=''" id="choice" /><br /><br />
<button onclick="higherLower()">Guess</button>
<p id="result"></p>
<p id="values"></p>
</body>
<script src="scripts.js"></script>
</html>
let userMax;
function userInput() {
userMax = prompt("Please enter a maximum number:");
while (userMax < 1 || isNaN(userMax)) {
alert("Maximum number cannot be negative, zero, or non-numbers");
userMax = userInput();
}
return userMax;
}
function isFloat(userMax) {
return Number(userMax) === n && n % 1 !== 0;
}
function higherLower(choice) {
// Declares random number variable
var randomNumber=Math.floor(Math.random() * userMax) + 1;
window.alert(randomNumber);
// Declares user guess variable
var guess=document.getElementById('choice').value;
// Declares random number variable
if(randomNumber==guess) {
document.getElementById("result").innerHTML = "You got it!";
}
else if(randomNumber>=guess) {
document.getElementById("result").innerHTML = "No, try a higher number.";
}
else if(randomNumber<=guess) {
document.getElementById("result").innerHTML = "No, try a lower number.";
}
}
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.
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:
let userMax;
let randomNumber;
function userInput() {
userMax = prompt("Please enter a maximum number:");
while (userMax < 1 || isNaN(userMax)) {
alert("Maximum number cannot be negative, zero, or non-numbers");
userMax = userInput();
}
randomNumber = Math.floor(Math.random() * Number(userMax)) + 1;
return userMax;
}
function isFloat(userMax) {
return Number(userMax) === n && n % 1 !== 0;
}
function higherLower(choice) {
// Declares random number variable
window.alert(randomNumber);
// Declares user guess variable
var guess=document.getElementById('choice').value;
// Declares random number variable
if(randomNumber==guess) {
document.getElementById("result").innerHTML = "You got it!";
randomNumber=Math.floor(Math.random() * Number(userMax)) + 1;
}
else if(randomNumber>=guess) {
document.getElementById("result").innerHTML = "No, try a higher number.";
}
else if(randomNumber<=guess) {
document.getElementById("result").innerHTML = "No, try a lower number.";
}
}
This happens because you are generating a random number in every call to higherLower function
so you have to declare to variable outside and set up a random number to it out side this function
let userMax;
let randomNumber;
function start() {
userMax = prompt("Please enter a maximum number:");
if (userMax < 1 || isNaN(userMax)) {
alert("Maximum number cannot be negative, zero, or non-numbers");
userMax = start();
}
randomNumber = Math.floor(Math.random() * Number(userMax)) + 1;
}
function higherLower() {
// Declares random number variable
window.alert(randomNumber);
// Declares user guess variable
var guess=document.getElementById('choice').value;
// Declares random number variable
if(randomNumber==guess) {
document.getElementById("result").innerHTML = "You got it!";
}
else if(randomNumber>=guess) {
document.getElementById("result").innerHTML = "No, try a higher number.";
}
else if(randomNumber<=guess) {
document.getElementById("result").innerHTML = "No, try a lower number.";
}
}
And you do not have to use while in while (userMax < 1 || isNaN(userMax))
you just can put a simple if statement,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Higher Lower</title>
</head>
<body>
<h1>Higher - Lower</h1>
<!--maxNum Function-->
<!-- <p>Please enter a maximum number:</p>
<input type="text" id="maxNum" /><br /><br /> -->
<button onclick="start()">Input Maximum Number</button>
<p id="ranNum"></p>
<p id="validation"></p>
<!--higherLower Function-->
<p>Your Guess:</p>
<input type="text" onfocus="this.value=''" id="choice" /><br /><br />
<button onclick="higherLower()">Guess</button>
<p id="result"></p>
<p id="values"></p>
</body>
<script src="scripts.js"></script>
</html>
And I changed the name of userInput function to start