Функция Javascript выполняется только каждый раз - PullRequest
Новая
       10

Функция Javascript выполняется только каждый раз

1 голос
/ 17 марта 2019

Я работаю над игрой в угадывание букв, внизу у меня есть табло, которое показывает, сколько жизней осталось у игрока, прежде чем он проиграл.У меня есть экранная клавиатура, которую пользователь нажимает, чтобы выбрать, какую букву он хочет угадать.

Все отлично работает, кроме удаления "жизней" игрока.У меня есть жизни как изображения, которые находятся в упорядоченном спискеПри каждом нажатии кнопки функция проверяет, соответствует ли нажатие этой кнопки букве в фразе.Если это не так, необходимо удалить жизнь из упорядоченного списка и добавить 1 к пропущенному счету.

Добавление 1 к пропущенному счету работает при каждом неправильном нажатии кнопки, но удаление сердца работает только при каждом другом нажатии, и я не уверен, почему.Любая помощь будет принята с благодарностью.

function checkLetter(clickedButton) {
  const letters = document.getElementsByClassName('letter');
  let letterFound = null;
  for (let i = 0; i < letters.length; i += 1) {
    if (clickedButton === letters[i].textContent) {
      letters[i].classList.add('show');
      letterFound = true;
    }
  }
  return letterFound;
}

function changeScore() {
  let scoreboardList = document.querySelector('ol');
  scoreboardList.removeChild(scoreboardList.childNodes[0]);
}

qwerty.addEventListener('click', (e) => {
  const button = e.target;
  const buttonText = button.textContent;
  checkLetter(buttonText);
  if (checkLetter(buttonText) == null) {
    missed += 1;
    changeScore();
    console.log(missed);
  } else {
    button.classList.add('chosen');
  }
});
   

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Wheel of Success!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="main-container">
      <div id="overlay" class="start">
        <h2 class="title">Wheel of Success</h2>
        <a class="btn__reset">Start Game</a>
      </div>

      <div id="banner" class="section">
        <h2 class="header">Wheel of Success</h2>
      </div>

      <div id="phrase" class="section">
        <ul></ul>
      </div>
      <div id="qwerty" class="section">
        <div class="keyrow">
          <button>q</button><button>w</button><button>e</button><button>r</button><button>t</button><button>y</button><button>u</button><button>i</button><button>o</button><button>p</button>
        </div>
        <div class="keyrow">
          <button>a</button><button>s</button><button>d</button><button>f</button><button>g</button><button>h</button><button>j</button><button>k</button><button>l</button>
        </div>
        <div class="keyrow">
          <button>z</button><button>x</button><button>c</button><button>v</button><button>b</button><button>n</button><button>m</button>
        </div>
      </div>

      <div id="scoreboard" class="section">
        <ol>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
          <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
        </ol>
      </div>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>

Ответы [ 2 ]

1 голос
/ 17 марта 2019

Из того, что я могу сказать, ваш вызов scoreboardList.removeChild(scoreboardList.childNodes[0]); удалит первый узел.В вашем случае это не обязательно элемент, но также может быть текстовый узел, содержащий только пробел.Это, вероятно, причина, почему только каждый второй вызов выглядит так, как будто он что-то делает.Другой удаляет пустое пространство.Я изменил код, чтобы вместо него явно удалить первый «сердечный» узел.И, конечно же, то, что Льюис упомянул в своем комментарии: не звоните checkLetter дважды.Просто используйте его в if напрямую. 

let missed = 0;

function changeScore() {
  let scoreboardList = document.querySelector('ol');

  // !!!!!! These two lines are the important changes:
  let heart = scoreboardList.querySelector('li:first-child'); // find first heart item
  scoreboardList.removeChild(heart); // remove the heart
}

document.addEventListener('click', (e) => {
  //const button = e.target;
  //const buttonText = button.textContent;
  //if (checkLetter(buttonText) == null) {
    missed += 1;
    changeScore();
    console.log(missed);
  //} else {
  //  button.classList.add('chosen');
  //}
});
<div id="scoreboard" class="section">
  <ol>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
    <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li>
  </ol>
</div>
0 голосов
/ 17 марта 2019

Просто обновите ваш changeScore() метод следующим образом: 

function changeScore() {
  let scoreboardList = document.querySelector('ol');

  // Replace this
  // scoreboardList.removeChild(scoreboardList.childNodes[0]);

  // By this 'EDIT'
  scoreboardList.removeChild(scoreboardList.querySelector('li:first-child'));
}

Это удалит сердце каждый раз, когда ответ ложен.

...