[英]Javascript textcontent is not displaying anything
我正在嘗試創建以下游戲。 然而，Javascript textcontent 沒有顯示任何內容。
計算機在某個最小值和最大值之間選擇一個隨機的“秘密”數字。 玩家的任務是猜數字。 對於每次猜測，應用程序都會通知用戶他們的數字是高於還是低於“秘密”數字。 額外挑戰：限制玩家的猜測次數。 跟蹤/報告猜到了哪些數字。
我的代碼如下：
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>
因為我沒有足夠的貢獻，所以我必須寫下來作為答案。
首先是這里
<input type='submit' class='submitguess'>
您應該阻止執行和刷新表單，因此您必須添加 preventdefault。 或者簡單地將輸入提交更改為按鈕類型=“按鈕”
第二
const resetParas = document.querySelectorAll('.display p');
你應該檢查這個。 resetParas 設置但您檢查顯示長度。
窗體的JavaScript函數未與textContent一起顯示
[英]Javascript Functions for Form are not Displaying with textContent
Javascript :: firstChild的textContent / innerText
[英]Javascript:: textContent/innerText of firstChild
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.