Удалить элемент узла, не удаляя innerHTML - PullRequest
Новая
       8

Удалить элемент узла, не удаляя innerHTML

0 голосов
/ 27 октября 2018

Я занимаюсь рефакторингом ванильной игры JS Wheel of Fortune / Hangman и пытаюсь выяснить, как удалить предыдущие элементы узла, отображаемые в подчеркиваниях, представляющих буквы в слове, которое пытается угадать пользователь.Если пользователь выбирает слово из 5-6 букв, это обычно хорошо, потому что следующее случайное слово, вероятно, содержит более 5-6 букв, поэтому оно будет перезаписывать более короткий массив подчеркиваний.Моя проблема в том, что слово типа «JAVASCRIPT» вызывает проблемы.Если пользователь получает «ARRAYS», «RIPT» из предыдущего «JAVASCRIPT» остается на странице.Я пробовал несколько вещей, таких как window.location.reload (), но я не хочу перезагружать страницу каждый раз, когда пользователь правильно угадывает слово, так как я хочу добавить систему, основанную на точках.Я попытался wordDisplay.remove (), но не повезло.Наконец, я попытался 

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

, но это не позволяет подчеркиваниям отображаться после нажатия кнопки воспроизведения.Это также не полностью решает проблему сброса дочерних узлов в wordDisplay.Любые идеи, как я могу решить эту проблему? 

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 голосов
/ 27 октября 2018

Вам нужно сбрасывать значения после каждого 

setTimeout(function () {
        answerList = [];
        letterClicked = '';
        playGame();
}, 3000);

Поскольку в настоящее время ваш массив содержит буквы, вы перезаписываете только некоторые из них, а также сохраняете последнюю нажатую букву.

0 голосов
/ 27 октября 2018

Процедура очистки

В функцию playGame() было добавлено следующее: 

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

Также есть некоторые поверхностные изменения, которые являются необязательными.Следует помнить, что #ids должно быть уникальным, было 26 экземпляров #letterChoices.

Демо 

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>
0 голосов
/ 27 октября 2018

answerList объявлен ранее. Поэтому, когда случайное слово, такое как «javascript», сохраняется в answerList как «__________», а длина массива answerList становится равной 10. Когда новое слово, такое как «массивы», сохраняется в answerList как «______», длина нового wordChoice меньше последней, то есть 6, поэтому оставшиеся 4 слова не изменяются, и именно поэтому ript не удаляется.

Решение: добавить эту строку 

answerList = [];

до 

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

это будет нормально работать.

...