Tengo dos botones cuando hago clic. Quiero llamar a las funciones. Envolví toda mi función en la función play (). Intenté agregar un EventListener al botón de adivinar, pero solo ejecuta la alerta solo dos veces después de que se actualiza la ventana.
function play() { let numInput = document.getElementById("input-number"); let resultText = document.getElementById("result-text"); let btnReset = document.getElementById("btn-reset"); let btnGuess = document.getElementById("btn-guess"); let numRandom = null; function getRandomNumber(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); } function guessTheNumber(){ numRandom = getRandomNumber(1,5); numInput = numInput.value; alert("button clicked") } btnGuess.addEventListener("click",function (){ guessTheNumber(); }); } play(); <!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>Guess That Number</title> <link rel="stylesheet" href="guessthatnumber.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,100&display=swap" rel="stylesheet"> </head> <body> <main> <h3 class="game-header">Guess the number!</h3> <p class="game-instruction">Enter a number between 1 - 5 below:</p> <input class="game-input" type="text" id="input-number" placeholder="Enter your number here" tabindex="1" autofocus > <h4 class="game-result" id="result-text">Success!</h4> <div class="btn-container"> <button class="btn-clear" id="btn-reset">Reset</button> <button class="btn-guess" id="btn-guess">Guess</button> </div> </main> <script src="guessthatnumber.js"></script> </body> </html>Está sucediendo porque está cambiando el valor numInput cada vez que se presiona el botón .. numInput = numInput.value;
primera iteración: numInput es igual al valor dentro de una entrada (digamos que es 5)
por lo que el numInput es 5
segunda iteración: numInput es igual a numInput.value y dado que 5 no tiene el atributo .value , no está undefined y obtiene un error
El problema con el código está en la función guessTheNumber .
Estás calculando el número aleatorio usando numRandom = getRandomNumber(1, 5); y en la siguiente línea está asignando numInput = numInput.value; . Aquí numInput es su elemento de entrada. Está sobrescribiendo esa variable con un número. La próxima vez que guessTheNumber ejecute numInput será una cadena y numInput.value no estará definido. La tercera vez que intente acceder al valor de indefinido, esto generará un error de consola como Uncaught TypeError: Cannot read properties of undefined (reading 'value')
Corrija ese segmento de código para que su código sea estable.
He comentado esa sección para que el código no se rompa.
function play() { let numInput = document.getElementById("input-number"); let resultText = document.getElementById("result-text"); let btnReset = document.getElementById("btn-reset"); let btnGuess = document.getElementById("btn-guess"); let numRandom = null; function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function guessTheNumber() { numRandom = getRandomNumber(1, 5); // numInput = numInput.value; console.log(numRandom); alert("button clicked") } btnGuess.addEventListener("click", function () { guessTheNumber(); }); } <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,100&display=swap" rel="stylesheet"> <main> <h3 class="game-header">Guess the number!</h3> <p class="game-instruction">Enter a number between 1 - 5 below:</p> <input class="game-input" type="text" id="input-number" placeholder="Enter your number here" tabindex="1" autofocus> <h4 class="game-result" id="result-text">Success!</h4> <div class="btn-container"> <button class="btn-clear" id="btn-reset">Reset</button> <button class="btn-guess" id="btn-guess">Guess</button> </div> </main>Varias cosas
Puede simplificar el código moviendo las funciones fuera
const numInput = document.getElementById("input-number"), resultText = document.getElementById("result-text"), btnReset = document.getElementById("btn-reset"), btnGuess = document.getElementById("btn-guess"); function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } function play() { let numRandom = getRandomNumber(1, 5); let num = +numInput.value; resultText.hidden = numRandom != num; console.log(numRandom === num ? "you guessed right" : "you guessed wrong") } btnGuess.addEventListener("click", play) btnReset.addEventListener("click", function() { resultText.hidden = true; numInput.value = ""; }) <!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>Guess That Number</title> <link rel="stylesheet" href="guessthatnumber.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,100&display=swap" rel="stylesheet"> </head> <body> <main> <h3 class="game-header">Guess the number!</h3> <p class="game-instruction">Enter a number between 1 - 5 below:</p> <input class="game-input" type="text" id="input-number" placeholder="Enter your number here" tabindex="1" autofocus> <h4 class="game-result" hidden id="result-text">Success!</h4> <div class="btn-container"> <button class="btn-clear" id="btn-reset">Reset</button> <button class="btn-guess" id="btn-guess">Guess</button> </div> </main> <script src="guessthatnumber.js"></script> </body> </html>