Javascript textcontent is not displaying anything
Question
I am trying to create the below game. The Javascript textcontent however is not displaying anything.
The Computer selects a random "secret" number between some min and max. The Player is tasked with guessing the number. For each guess, the application informs the user whether their number is higher or lower than the "secret" number. Extra challenges: Limit the number of guesses the Player has. Keep track/report which numbers have been guessed.
My code is as follows:
const submitguess = document.querySelector('.submitguess'); const inputno = document.querySelector('#secretno'); const resultmatch = document.querySelector('#resultmatch'); const highorlow = document.querySelector('#highorlow'); const guesslist = document.querySelector('#guesslist'); let randomNumber = Math.floor(Math.random() * 10) + 1; let count = 1; let resetButton; function guessvalid() { let input = Number(inputno.value); //alert('I am at 0'); if (count === 1) { guesslist.textContent = 'Last guesses:'; } guesslist.textContent += input + ', '; if (randomNumber === input) { //alert('I am here 1'); resultmatch.textContent = 'Bazingaa!!! You got it absolutely right'; highorlow.textContent = ''; guesslist.textContent = ''; GameOver(); } else if (count === 5) { resultmatch.textContent = 'Game Over !! Thanks for playing.'; //alert('I am here 2'); highorlow.textContent = ''; guesslist.textContent = ''; GameOver(); } else { //alert('I am here 3'); resultmatch.textContent = 'Sorry the secret no and your guess do not match.Please try again !!'; if (randomNumber > input) { //alert('I am here 4'); highorlow.textContent = 'Hint.The guess was lower than the secret no.'; } else if (randomNumber < input) { //alert('I am here 5'); highorlow.textContent = 'Hint.The guess was higher than the secret no.'; } } count = count + 1; input.value = ''; } submitguess.addEventListener('click', guessvalid); function GameOver() { inputno.disabled = true; submitguess.disabled = true; resetButton = document.createElement('button'); resetButton.textContent = 'Lets play again'; document.body.appendChild(resetButton); resetButton.addEventListener('click', reset); } function reset() { count = 1; const newDisplay = document.querySelectorAll('.display p'); for(let k = 0 ; k < newDisplay.length ; k++) { newDisplay[k].textContent = ''; } resetButton.parentNode.removeChild(resetButton); inputno.disabled = false; submitguess.disabled = false; inputno.value = ''; randomNumber = Math.floor(Math.random() * 10) + 1; }
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Hi Low</title> <link rel='stylesheet' href='style.css'> </head> <body> <header> <h3>Lets guess the secret number between 1 and 10</h3> <h4>You have 5 chances to guess </h4> </header> <br/> <br/> <form class='form'> <div class='secretno'> <label for='secretno'>Please enter your guess for secret no (between 1 and 10):</label> <input id='secretno' type='number' name='secretno' step='1' min='1' max='10' required> <span class='validity'></span> <input type='button' class='submitguess' value='submit'> </div> </form> <br/> <br/> <div class='display'> <p id='resultmatch'> </p> <p id='highorlow'> </p> <p id='guesslist'> </p> </div>
1 answers
solution1
2 ACCPTED 2020-09-14 08:00:48
Because I don't have enough contribution I have to write as an answer.
First is here
<input type='submit' class='submitguess'>
you should prevent the form to be executed and refresh so you have to add preventdefault. or simply change input submit to button type="button"
Second
const resetParas = document.querySelectorAll('.display p');
You should check this one. resetParas set but you check display length.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.