How do you call a function only once until victory conditions are met?

June 30, 2022

<!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.

>Solution :

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.";
    }
}