Javascript textcontent 未显示任何内容

Question

我正在尝试创建以下游戏。 然而，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>

Answer 1

因为我没有足够的贡献，所以我必须写下来作为答案。

首先是这里

<input type='submit' class='submitguess'>

您应该阻止执行和刷新表单，因此您必须添加 preventdefault。 或者简单地将输入提交更改为按钮类型=“按钮”

第二

const resetParas = document.querySelectorAll('.display p');

你应该检查这个。 resetParas 设置但您检查显示长度。

Javascript textcontent 未显示任何内容

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-09-14 08:00:48

Javascript textcontent 未显示任何内容

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-09-14 08:00:48

解决方案1
2 已采纳 2020-09-14 08:00:48