删除节点元素而不删除innerHTML

时间：2018-10-27 00:25:24

标签： javascript arrays removechild

我正在重构一个普通的JS幸运轮/ Hangman游戏，并且试图找出如何删除下划线中显示的先前节点元素，这些元素代表用户要猜测的单词中的字母。如果用户选择的单词为5-6个字母，通常会很好，因为下一个随机单词可能超过5-6个字母，因此它将覆盖较短的下划线数组。我的问题是，像“ JAVASCRIPT”这样的词会引起问题。如果用户获得“ ARRAYS”，则先前的“ JAVASCRIPT”中的“ RIPT”仍保留在页面上。我尝试了诸如window.location.reload（）之类的几件事，但由于用户要添加基于点的系统，因此我不想每次用户正确猜出单词时都重新加载页面。我试过wordDisplay.remove（）但没有运气。最后，我尝试了

wordDisplay.childNodes.forEach(child => {
    wordDisplay.removeChild(child);
 });

，但是一旦按下播放按钮，则不允许显示下划线。它还不能完全解决在wordDisplay中重置childNodes的问题。有什么想法可以解决这个问题吗？

let guessesLeft,
    letterClicked,
    wordChoice,
    remainingLetters,
    answerList = [],
    wordArray = ["JAVASCRIPT", "ARRAYS", "FUNCTIONS", "HOISTING", "RECURSION", "EVENTS", "KEYUP", "TERNARY"],
    hint = document.querySelector(".hint"),
    letterGuessed = document.querySelector("#your-guess"),
    numbers = document.querySelector("#numbers"),
    guesses = document.querySelector("#guesses"),
    wordDisplay = document.querySelector("#words"),
    letterCount = document.querySelector(".letters"),
    newGame = document.querySelector("#play"),
    letterBoxes = document.querySelector("#alphabet"),
    titleHeader = document.querySelector(".welcome"),
    pointTotal = document.querySelector("#pointTotal");

function playGame() {

    guessesLeft = 6;
    guesses.innerHTML = `You have ${guessesLeft} guesses left`;
    // Pick a random word.
    wordChoice = wordArray[Math.floor(Math.random() * wordArray.length)];

    for (var i = 0; i < wordChoice.length; i++) {
        answerList[i] = "_";
    }
    // Display underscores on page representing each letter in the random word
    wordDisplay.innerHTML = answerList.join('');

    let hintObject = {
        JAVASCRIPT: "The language of the web",
        ARRAYS: "Similar to objects",
        FUNCTIONS: "Stores instructions",
        HOISTING: "Moving declarations to the top",
        RECURSION: "Calling functions inside of functions",
        EVENTS: "This happens to HTML elements; like a concert",
        KEYUP: "Not 'keydown', but...",
        TERNARY: "Type of operator"
    }

    hint.innerHTML = `Clue: ${hintObject[wordChoice]}`;

    // Display number of letters in the random word on the page
    remainingLetters = wordChoice.length;
    letterCount.innerHTML = `The word is ${remainingLetters} letters long`;

    // wordDisplay.childNodes.forEach(child => {
    //     wordDisplay.removeChild(child);
    // });
}

// Register the player’s guess.
function buttonPress(e) {
    letterClicked = e.target.textContent;
    letterGuessed.innerHTML = `You guessed the letter ${letterClicked}`;
    matchWord(letterClicked);
}

// Pass the letter event from buttonPress into the randomWord function
function matchWord(letter) {
    pointTotal = 0;
    if (remainingLetters > 0) {
        let foundMatch = false;

        for (var i = 0; i < wordChoice.length; i++) {
            if (wordChoice[i] === letter) {
                foundMatch = true;
                answerList[i] = letter;
                wordDisplay.innerHTML = answerList.join(' ');
                remainingLetters--;
            }
        }

        if (!foundMatch) {
            guessesLeft--;
            guesses.innerHTML = (`You have ${guessesLeft} guesses left`);
        }

        if (guessesLeft === 0) {
            hint.innerHTML = "Sorry, you're out of guesses!";
            setTimeout(function () {
                hint.innerHTML = "If you'd like to play again, click the spin button.";
                letterCount.innerHTML = "You lost :(";
            }, 3000);
        }

        if (remainingLetters === 0) {
            hint.innerHTML = "Great job! You guessed it!";
            pointTotal++;
            setTimeout(function () {
                playGame();
            }, 3000);
        }
    }
}
body {
    background: linear-gradient(200deg, #025302, #027740, #05b965, #07e07b, #05532f);
    background-size: contain;
    color: white;
    font-family: 'Merriweather', serif;
    text-shadow: 2px 2px 3px rgb(27, 22, 22);
}

#container {
    display: block;
    margin: 20px;
}

#roundsWon {
    margin-left: 15%;
    font-size: 45px;
}

.welcome {
    font-size: 80px;
    letter-spacing: 5px;
    text-align: center;
}

.letters, .lives {
    font-size: 30px;
    text-align: center;
}

.hint {
    font-size: 35px;
    text-align: center;
}

#words {
    justify-content: center;
    text-align: center;
    font-size: 50px;
    margin: 10px;
    letter-spacing: 20px;
}

#alphabet {
    margin: 0 auto;
    width: 990px;
}

#letterChoices {
    padding: 5px;
    margin: 5px;
    width: 2em;
    height: 10%;
    font-size: 2em;
    border: 2px solid white;
    text-align: center;
    box-shadow: 2px 2px 3px black;
}

#play {
    float: left;
    margin: 20px auto;
    font-size: 60px;
}

#your-guess {
    float: right;
    margin-right: 5%;
    font-size: 40px;
    color: #bada55;
}
<!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>Wheel of Fortune</title>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            <link rel="stylesheet" href="main.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
            <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
        </head>
        <body>
            <div class="Title">
                <h1 class="welcome">Welcome to Wheel of Fortune!</h1>
            </div>
                <div id="alphabet" onclick="buttonPress(event)">
                    <a id="letterChoices" class="waves-effect waves-light btn-large">A</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">B</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">C</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">D</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">E</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">F</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">G</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">H</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">I</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">J</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">K</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">L</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">M</a>
                </br>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">N</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">O</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">P</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">Q</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">R</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">S</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">T</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">U</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">V</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">W</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">X</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">Y</a>
                    <a id="letterChoices" class="waves-effect waves-light btn-large">Z</a>
                </div>
                <div id="container">
                    <div id="header">
                        <p class="hint">Hint will display once you spin</p>
                        <!-- The letters will be tied to the number of letters in the random array -->
                        <p class="letters">The word is <span id="numbers">_</span> letters long</p>
                        <!-- The user will be given a number of choices and with each wrong choice, they lose a turn -->
                        <p class="lives"><span id="guesses">You have _ guesses remaining</span></p>
                        <p id="words"></p>
                    </br>
                        <a id="play" onclick="playGame()" class="waves-effect waves-light btn-large">Spin</a>
                        <span id="roundsWon">Rounds won:<span id="pointTotal"></span></span>
                        <span id="your-guess">Letter guessed</span>
                    </div>
                </div>
        
            <script src="main.js"></script>
        </body>
        </html>

3 个答案:

答案 0 :(得分：2)

answerList 已在之前声明。因此，当像'javascript'这样的随机词以'__________'的形式存储在答案列表中并且数组 answerList 的长度变为10时，当像'数组'这样的新词以'______'的形式存储在答案列表中时新wordChoice的长度小于最后一个单词的长度，即6，因此其余4个单词不会更改，这就是为什么未删除 ript 的原因。

解决方案： 添加此行

answerList = [];

之前

for (var i = 0; i < wordChoice.length; i++) {
    answerList[i] = "_";
}

这可以正常工作。

答案 1 :(得分：0)

您需要在每次

之后重置您的值 
setTimeout(function () {
        answerList = [];
        letterClicked = '';
        playGame();
}, 3000);

目前，您的数组保留字母，并且仅覆盖其中的一部分，并且保留最后单击的字母。

答案 2 :(得分：0)

清除程序

以下内容已添加到playGame()函数中：

function playGame() {
  /* Clearing Procedure */
   wordDisplay.innerHTML = " ";
   remainingLetters = 0;
   answerList.length = 0;
   ...

还有一些表面上的变化，这些变化纯粹是可选的。要记住的一件事是#ids必须是唯一的，#letterChoices有26个实例。

演示

let guessesLeft,
  letterClicked,
  wordChoice,
  remainingLetters,
  answerList = [],
  wordArray = ["JAVASCRIPT", "ARRAYS", "FUNCTIONS", "HOISTING", "RECURSION", "EVENTS", "KEYUP", "TERNARY"],
  hint = document.querySelector("#hint"),
  letterGuessed = document.querySelector("#guess"),
  letterCount = document.querySelector("#letters"),
  guesses = document.querySelector("#guesses"),
  wordDisplay = document.querySelector("#words"),
  newGame = document.querySelector("#play"),
  letterBoxes = document.querySelector(".alphabet"),
  titleHeader = document.querySelector("h1"),
  pointTotal = document.querySelector("#pointTotal");

function playGame() {

  /* Clearing Procedure */
  wordDisplay.innerHTML = " ";
  remainingLetters = 0;
  answerList.length = 0;

  guessesLeft = 6;
  guesses.innerHTML = guessesLeft;
  // Pick a random word.
  wordChoice = wordArray[Math.floor(Math.random() * wordArray.length)];

  for (var i = 0; i < wordChoice.length; i++) {
    answerList[i] = "_";
  }
  // Display underscores on page representing each letter in the random word
  wordDisplay.innerHTML = answerList.join('');

  let hintObject = {
    JAVASCRIPT: "The language of the web",
    ARRAYS: "Similar to objects",
    FUNCTIONS: "Stores instructions",
    HOISTING: "Moving declarations to the top",
    RECURSION: "Calling functions inside of functions",
    EVENTS: "This happens to HTML elements; like a concert",
    KEYUP: "Not 'keydown', but...",
    TERNARY: "Type of operator"
  }

  hint.innerHTML = `Clue: ${hintObject[wordChoice]}`;

  // Display number of letters in the random word on the page
  remainingLetters = wordChoice.length;
  letterCount.innerHTML = remainingLetters;
}

// Register the player’s guess.
function buttonPress(e) {
  letterClicked = e.target.textContent;
  letterGuessed.innerHTML = letterClicked;
  matchWord(letterClicked);
}

// Pass the letter event from buttonPress into the randomWord function
function matchWord(letter) {
  pointTotal = 0;
  if (remainingLetters > 0) {
    let foundMatch = false;

    for (var i = 0; i < wordChoice.length; i++) {
      if (wordChoice[i] === letter) {
        foundMatch = true;
        answerList[i] = letter;
        wordDisplay.innerHTML = answerList.join(' ');
        remainingLetters--;
      }
    }

    if (!foundMatch) {
      guessesLeft--;
      guesses.innerHTML = guessesLeft;
    }

    if (guessesLeft === 0) {
      hint.innerHTML = "Sorry, you're out of guesses!";
      setTimeout(function() {
        hint.innerHTML += "If you'd like to play again, click the spin button.";
        letterCount.innerHTML = "You lost :(";
      }, 3000);
    }

    if (remainingLetters === 0) {
      hint.innerHTML = "Great job! You guessed it!";
      pointTotal++;
      setTimeout(function() {
        playGame();
      }, 3000);
    }
  }
}
body {
  background: linear-gradient(200deg, #025302, #027740, #05b965, #07e07b, #05532f);
  background-size: contain;
  color: white;
  font-family: 'Merriweather', serif;
  text-shadow: 2px 2px 3px rgb(27, 22, 22);
}

.container {
  margin: 20px;
}

[for=pointTotal] {
  margin-left: 15%;
  font-size: 45px;
}

h1 {
  font-size: 80px;
  letter-spacing: 5px;
  text-align: center;
}

label {
  margin: 5px;
}

label,
output {
  display: block;
}

label output {
  display: inline-block;
}

[for=letters],
[for=guesses] {
  font-size: 30px;
  text-align: center;
}

#hint {
  font-size: 35px;
  text-align: center;
}

#words {
  text-align: center;
  font-size: 50px;
  margin: 10px;
  letter-spacing: 20px;
}

.alphabet {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.letter {
  padding: 5px;
  margin: 5px;
  width: 2em;
  height: 10%;
  font-size: 2em;
  border: 2px solid white;
  text-align: center;
  box-shadow: 2px 2px 3px black;
}

#play {
  float: left;
  margin: 20px auto;
  font-size: 60px;
}

[for=guess] {
  float: right;
  margin-right: 5%;
  font-size: 40px;
  color: #bada55;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Wheel of Fortune</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
</head>

<body>

  <h1>Welcome to Wheel of Fortune!</h1>

  <section class="alphabet" onclick="buttonPress(event)">
    <a class="letter waves-effect waves-light btn-large">A</a>
    <a class="letter waves-effect waves-light btn-large">B</a>
    <a class="letter waves-effect waves-light btn-large">C</a>
    <a class="letter waves-effect waves-light btn-large">D</a>
    <a class="letter waves-effect waves-light btn-large">E</a>
    <a class="letter waves-effect waves-light btn-large">F</a>
    <a class="letter waves-effect waves-light btn-large">G</a>
    <a class="letter waves-effect waves-light btn-large">H</a>
    <a class="letter waves-effect waves-light btn-large">I</a>
    <a class="letter waves-effect waves-light btn-large">J</a>
    <a class="letter waves-effect waves-light btn-large">K</a>
    <a class="letter waves-effect waves-light btn-large">L</a>
    <a class="letter waves-effect waves-light btn-large">M</a>
    <a class="letter waves-effect waves-light btn-large">N</a>
    <a class="letter waves-effect waves-light btn-large">O</a>
    <a class="letter waves-effect waves-light btn-large">P</a>
    <a class="letter waves-effect waves-light btn-large">Q</a>
    <a class="letter waves-effect waves-light btn-large">R</a>
    <a class="letter waves-effect waves-light btn-large">S</a>
    <a class="letter waves-effect waves-light btn-large">T</a>
    <a class="letter waves-effect waves-light btn-large">U</a>
    <a class="letter waves-effect waves-light btn-large">V</a>
    <a class="letter waves-effect waves-light btn-large">W</a>
    <a class="letter waves-effect waves-light btn-large">X</a>
    <a class="letter waves-effect waves-light btn-large">Y</a>
    <a class="letter waves-effect waves-light btn-large">Z</a>
  </section>
  <section class="container">
    <header>
      <output id="hint">Hint will display once you spin</output>
      <!-- The letters will be tied to the number of letters in the random array -->
      <label for="letters">The word is <output id="letters">_</output> letters long</label>
      <!-- The user will be given a number of choices and with each wrong choice, they lose a turn -->
      <label for='guesses'>You have <output id="guesses">_</output> guesses remaining</label>
      <output id="words"></output>
      <br>
      <a id="play" onclick="playGame()" class="waves-effect waves-light btn-large">Spin</a>
      <label for="pointTotal">Rounds won:<output id="pointTotal"></output></label>
      <label for="guess">Letter guessed <output id='guess'>_</output></label>
    </header>

  </section>
</body>

</html>

相关问题
最新问题