Codifiqué un juego simple en el que tienes que adivinar un número aleatorio. El usuario envía el número y la aplicación lo compara con el número generado aleatoriamente. El usuario recibe un mensaje si su número es mayor o menor que la solución.
El código es:
const start = document.getElementById("start") const description = document.getElementById("description") const gameBody = document.getElementById("root") let valaszokHTML start.addEventListener("click", gameStart) function gameStart() { gameBody.innerHTML = '<input type = "number" placeholder ="Enter your guess..." "min="1" max="1000" id="usernumber">' + '</input>' + '<button id="guessbutton">This is my guess!</button>' const guessSubmit = document.getElementById("guessbutton") guessSubmit.addEventListener("click", compareNumbers) } function compareNumbers() { let userNumber = document.getElementById("usernumber").value if (myNumber.szamom > userNumber) { gameBody.innerHTML += "<h1>Wrong! It's bigger than " + userNumber } else if (myNumber.szamom < userNumber) { gameBody.innerHTML += "<h1>Wrong! It's smaller than " + userNumber } else if (myNumber.szamom == userNumber) { gameBody.innerHTML = "<h1>Right! You won!</h1>" } } const myNumber = { szamom: Math.floor(Math.random() * 1000) + 1, } <!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>Document</title> </head> <body> <div id="root"> <div id="description"> <h1> Try to guess the number between 1 and 1000!</h1> </div> <button id="start">Game start</button> </div> <script src="practice.js"></script> </body> </html> Entonces, mi problema es que solo puedo hacer clic en el button adivinar Enviar una vez. La primera vez que hago clic crea el HTML que quiero, pero luego ya no puedo usar el botón. Quiero que cree un nuevo elemento h1 cada vez que haga clic en él (por lo que habrá un montón de elementos h1 debajo/uno encima del otro, hasta que el usuario obtenga el número)
¿Puedes ayudarme y explicarme qué estoy haciendo mal?
Realmente agradecería recibir algunas respuestas.
Debe agregar un addEventListener al final de su función compareNumbers, porque no es global.
const start = document.getElementById("start") const description = document.getElementById("description") const gameBody = document.getElementById("root") let valaszokHTML start.addEventListener("click", gameStart) function gameStart() { gameBody.innerHTML = '<input type = "number" placeholder ="Enter your guess..." "min="1" max="1000" id="usernumber">' + '</input>' + '<button id="guessbutton">This is my guess!</button>' let guessSubmit = document.getElementById("guessbutton"); guessSubmit.addEventListener("click", compareNumbers); } function compareNumbers() { let userNumber = document.getElementById("usernumber").value if (myNumber.szamom > userNumber) { gameBody.innerHTML += "<h1>Wrong! It's bigger than " + userNumber } else if (myNumber.szamom < userNumber) { gameBody.innerHTML += "<h1>Wrong! It's smaller than " + userNumber } else if (myNumber.szamom == userNumber) { gameBody.innerHTML = "<h1>Right! You won!</h1>" } let guessSubmit = document.getElementById("guessbutton"); guessSubmit.addEventListener("click", compareNumbers); } const myNumber = { szamom: Math.floor(Math.random() * 1000) + 1, } <!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>Document</title> </head> <body> <div id="root"> <div id="description"> <h1> Try to guess the number between 1 and 1000!</h1> </div> <button id="start">Game start</button> </div> <script src="practice.js"></script> </body> </html>Cuando haces gameBody.innerHTML += "some text" , estás destruyendo y recreando completamente todo el contenido, por lo tanto, eventListener de guessSubmit también se destruirá. Entonces, tal vez agregue algo de <h1 id="answer_text"></h1> y manipule su innerHtml