I coded a simple game where you have to guess a random number. The user submits the number and the app compares it to the random generated number. The user gets back a message whether their number is bigger or smaller than the solution.
The Code is :
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>So my problem that I can can only click the guessSubmit button once. The first time I click it creates the HTML I want, but then I can't use the button anymore. I want it to create a new h1 element whenever I click it (so it will be a bunch of h1 elements below/above each other, until the user gets the number)
Can you please help me and explain, what am I doing wrong?
I would be really appreciate to get some responses.
CodePudding user response：
You have to add a addEventListener at the end of your compareNumbers function, because it is not 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>CodePudding user response：
The problem is at gameBody.innerHTML = ..., it re-assigns the HTML content, the event listener added previously is erased.
Suggested solution: add another <div id="message"></div> to show messages.
const start = document.getElementById("start")
const description = document.getElementById("description")
const gameBody = document.getElementById("root")
const messageBody = document.getElementById("message")
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) {
messageBody.innerHTML = "<h1>Wrong! It's bigger than " userNumber
} else if (myNumber.szamom < userNumber) {
messageBody.innerHTML = "<h1>Wrong! It's smaller than " userNumber
} else if (myNumber.szamom == userNumber) {
messageBody.innerHTML = '';
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>
<div id="message"></div>
<script src="practice.js"></script>
</body>
</html>CodePudding user response：
When you do gameBody.innerHTML = "some text" you're completely destroying and recreating all the content, hence eventListener of guessSubmit will be destroyed too. So maybe add some <h1 id="answer_text"></h1> and manipulate it's innerHtml