<!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."; } }Estoy creando un juego de adivinanzas basado en que el usuario ingrese el número máximo. Me preguntaba cómo podría generar el número aleatorio solo una vez hasta que el usuario adivine correctamente. Me equivoqué con la creación de otra función y las funciones de anidamiento, sin embargo, no pude hacer que nada sólido funcionara. Actualmente, el botón llama a la función principal del juego cada vez que se hace clic en él y no quiero agregar otros botones/entradas para resolver este problema.
Coloque var randomNumber=Math.floor(Math.random() * userMax) + 1; fuera de su función, y no debe reemplazarse cuando llama a higherLower() .
Si el usuario adivina correctamente, establezca randomNumber en otro Math.floor(Math.random() * userMax) + 1
Entonces, su código debería verse así:
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."; } }Esto sucede porque está generando un número aleatorio en cada llamada a la función higherLower , por lo que debe declarar la variable externa y configurar un número aleatorio fuera de esta función.
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."; } } Y no tiene que usar while in while (userMax < 1 || isNaN(userMax)) solo puede poner una declaración if simple,
<!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> Y cambié el nombre de la función userInput para start