Question

我真的很困。我尝试了很多东西，但是都没有用。我正在尝试从

存储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>

Answer 1

您需要将事件侦听器附加到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);
    });
}

Answer 2

该功能当前会发出警报，但您可以根据需要使用

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>

遍历DOM。如何从li获取onclick值

2 个答案: