Обход DOM.Как получить значение onclick из li - PullRequest
Новая
       0

Обход DOM.Как получить значение onclick из li

0 голосов
/ 25 февраля 2019

Я действительно застрял.Я перепробовал много вещей, но ничего не работает.Я пытаюсь сохранить значение события onclick из

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

вот мой код 

/* random word generator */
function pickWord() {
  let words = [
    'dog',
    'horse',
    'kitchen',
    'javascript',
    'computer',
    'programming',
    'chair',
    'towel',
    'music',
    'zoo',
    'oxygen'
  ];
  return words[Math.floor(Math.random() * words.length)];
}

/* display word.length when start button is clicked */

const startButton = document.getElementById('game-button');

startButton.onclick = () => {
  const word = pickWord();
  const answerArray = displayWord(word);
  document.getElementById('game-word').innerHTML = answerArray;
  return answerArray;
}

function displayWord(word) {
  const answerArray = [];
  for (let i = 0; i < word.length; i++) {
    answerArray[i] = "_";
  }
  return answerArray.join(" ");
}

const getGuess = document.getElementsByClassName('game-letters');

getGuess.onclick = () => {
  const input = getGuess.value // stuck here
}

console.log(getGuess)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hangman</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
  <script type="text/javascript" src="script.js" async=""></script>
  <script type="text/javascript" src="typed.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Nova+Flat|Nova+Slim" rel="stylesheet">

</head>

<body>
  <div class="wrapper">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-12">
          <h1 class="header">H A N G M A N</h1>
          <div class="id-strings">
            <h3 class="typed-text"><span id="typed"></span></h3>
          </div>

          <div id="game">
            <ul id="game-list">
              <li class="game-letters">A</li>
              <li class="game-letters">B</li>
              <li class="game-letters">C</li>
              <li class="game-letters">D</li>
              <li class="game-letters">E</li>
              <li class="game-letters">F</li>
              <li class="game-letters">G</li>
              <li class="game-letters">H</li>
              <li class="game-letters">I</li>
              <li class="game-letters">J</li>
              <li class="game-letters">K</li>
              <li class="game-letters">L</li>
              <li class="game-letters">M</li>
              <li class="game-letters">N</li>
              <li class="game-letters">O</li>
              <li class="game-letters">P</li>
              <li class="game-letters">Q</li>
              <li class="game-letters">R</li>
              <li class="game-letters">S</li>
              <li class="game-letters">T</li>
              <li class="game-letters">U</li>
              <li class="game-letters">V</li>
              <li class="game-letters">W</li>
              <li class="game-letters">X</li>
              <li class="game-letters">Y</li>
              <li class="game-letters">Z</li>
            </ul>
          </div>

          <div id="game-word"></div>

          <div id="game-begin">
            <button id="game-button">Start Game</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Функция в настоящее время оповещает, но вы можете использовать, как вы хотите

function theFunction(e)
{ alert(e.target.innerHTML);}
<head>
  <meta charset="UTF-8">
  <title>Hangman</title>
  <link rel="stylesheet" =
</head>

<body onclick="theFunction(event)">
  <div class="wrapper">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-12">
          <h1 class="header">H A N G M A N</h1>
          <div class="id-strings">
            <h3 class="typed-text"><span id="typed"></span></h3>
          </div>

          <div id="game">
            <ul id="game-list">
              <li class="game-letters">A</li>
              <li class="game-letters">B</li>
              <li class="game-letters">C</li>
              <li class="game-letters">D</li>
              <li class="game-letters">E</li>
              <li class="game-letters">F</li>
              <li class="game-letters">G</li>
              <li class="game-letters">H</li>
              <li class="game-letters">I</li>
              <li class="game-letters">J</li>
              <li class="game-letters">K</li>
              <li class="game-letters">L</li>
              <li class="game-letters">M</li>
              <li class="game-letters">N</li>
              <li class="game-letters">O</li>
              <li class="game-letters">P</li>
              <li class="game-letters">Q</li>
              <li class="game-letters">R</li>
              <li class="game-letters">S</li>
              <li class="game-letters">T</li>
              <li class="game-letters">U</li>
              <li class="game-letters">V</li>
              <li class="game-letters">W</li>
              <li class="game-letters">X</li>
              <li class="game-letters">Y</li>
              <li class="game-letters">Z</li>
            </ul>
          </div>

          <div id="game-word"></div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
0 голосов
/ 25 февраля 2019

Вам необходимо подключить прослушиватель событий к каждому конкретному экземпляру класса game-letters. Кроме того, вы не можете использовать getGuess в качестве значения, вы должны передать этот объект как this аргумент

Пример: вместо этого делать это 

const getGuess = document.getElementsByClassName('game-letters');
getGuess.onclick = () => {
  const input = getGuess.value // stuck here
}

Сделайте это: 

for (let i = 0; i < getGuess.length; i++) {
    getGuess[i].addEventListener("click", (this) => {
        const inputValue = this.textContent;
        console.log(inputValue);
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...