Question

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

Answer 1

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

第一个在这里

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

您应防止执行和刷新表单，因此必须添加preventdefault。或只是将输入提交更改为button type =“ button”

第二

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

您应该选中此一项。 resetParas已设置，但您需要检查显示长度。

JavaScript文本内容未显示任何内容

1 个答案: