Question

我正在尝试通过MDN网站Learn JavaScript

进行此练习来学习javascript

这是我游戏的最终代码。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>Number guessing game</title>

  <style>
    html {
      font-family: sans-serif;
    }
    body {
      width: 50%;
      max-width: 800px;
      min-width: 480px;
      margin: 0 auto;
    }
    .lastResult {
      color: white;
      padding: 3px;
    }
  </style>
</head>

<body>
  <h1>Number guessing game</h1>

  <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.</p>


  <div class="form">
    <label for="guessField">Enter a guess:</label>
    <input type="text" id="guessField" class="guessField" autofocus>
    <input type="submit" value="Submit guess" class="guessSubmit">
  </div>



  <div class="resultParas">
    <p class="guesses"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
  </div>

</body>
<script>
  // Your JavaScript goes here
  var randomNumber = Math.floor(Math.random() * 100) + 1;

  var guesses = document.querySelector(".guesses");
  var lastResult = document.querySelector(".lastResult");
  var lowOrHi = document.querySelector(".lowOrHi");

  var guessField = document.querySelector(".guessField");
  var guessSubmit = document.querySelector(".guessSubmit");
  var test; //used for creating new reset button
  var count = 1; // counter for counting user input

  function checkGuess() {
    //alert('checkGuess is called');
    var value = Number(guessField.value);
    if (count === 1) {
      guesses.textContent = "Previous guesses :"
    }
    guesses.textContent += value + ' ';



    if (value === randomNumber) {
      lastResult.textContent = "congratulation u successfully guessed the number";
      lastResult.style.backgroundColor = "green";
      lowOrHi.textContent = "";
      left = 1;
      setGameOver();
    } else if (count === 10) {
      lastResult.textContent = "game over"
      lastResult.style.backgroundColor = "red";
      left = 1;
      setGameOver();
    } else {

      lastResult.textContent = "WRONG";
      lastResult.style.backgroundColor = "red";

      if (value < randomNumber) {
        lowOrHi.textContent = "too low";
      } else {
        lowOrHi.textContent = "too high";
      }
    }

    count++;
    guessField.value = '';

  }

  guessSubmit.addEventListener("click", checkGuess);


  function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    test = document.createElement('button');
    test.textContent = "restart game";
    document.body.appendChild(test);
    test.addEventListener('click', resetGame);
  }



  function resetGame() {
    count = 1;

    var resetParas = document.querySelectorAll('.resultParas');
    for (var i = 0; i < resetParas.length; i++) {
      resetParas[i].textContent = '';
    }

    guessField.disabled = false;
    guessSubmit.disabled = false;
    guessField.value = '';
    lastResult.style.backgroundColor = 'white';

    randomNumber = Math.floor(Math.random() * 100) + 1;

    test.parentNode.removeChild(test);
  }
</script>

</html>

＆＃13;

但是当我尝试运行游戏并使用重置游戏按钮重新启动游戏时，我无法使用textContent和backgroundColor属性操纵猜测，lastResult和lowOrHi元素。

Answer 1

你消灭掉里面的一切.resultParas ..这将包括你所有的<p>标签。 IOW：在这样做之后，他们已经从DOM中消失了，你可以在Chrome检查器中看到这样说。点击reset game后.resultPara现在是空白的，并且你的所有p标签都已消失。

我认为你真正想做的事情是让孩子们（p标签）空白......

您也不需要querySelectorAll，因为在您的情况下只有一个。

var resetParas = document.querySelector('.resultParas');
for(var i = 0 ; i < resetParas.children.length ; i++) {
  resetParas.children[i].textContent = '';
}

这个javascript脚本有什么问题。？

1 个答案: