Javascript textcontent 不显示任何内容答案

【问题标题】：Javascript textcontent is not displaying anythingJavascript textcontent 不显示任何内容
【发布时间】：2020-12-31 22:18:16
【问题描述】：

我正在尝试创建以下游戏。然而，Javascript 文本内容没有显示任何内容。

计算机在某个最小值和最大值之间选择一个随机的“秘密”数字。玩家的任务是猜测数字。对于每次猜测，应用程序都会通知用户他们的数字是高于还是低于“秘密”数字。额外挑战：限制玩家的猜测次数。跟踪/报告猜到了哪些数字。

我的代码如下：

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>

【问题讨论】：

您的代码中有display.length，但从不定义变量display。
点击提交按钮提交表单，因此页面重新加载。
display被定义为一个类。查看上面的html
但是在第一次提交后它应该显示 textContent，在我重新加载之前
"但在第一次提交后它应该显示 textContent，然后我再次重新加载" 然后不要使用提交按钮。将type='submit' 更改为type='button'。

标签： javascript html

【解决方案1】：

因为我没有足够的贡献，所以我必须写一个答案。

第一个来了

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

你应该阻止表单被执行和刷新，所以你必须添加preventdefault。或者只是将输入提交更改为按钮类型=“按钮”

第二

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

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

【讨论】：

我现在已经编辑了代码。最后一个问题，我怎样才能让“让我们再玩一次”按钮中心对齐？