如何在java脚本中获取用户输入并在页面上显示此输入？

Question

我是java新手，正在尝试创建一个模拟绞刑者的游戏。我试图从用户的字母后，他们在键盘上输入。然而，当我输入一些东西时，它没有任何区别，无论它是正确还是错误，它都不会输出。我想我可能没有正确使用我的guessLetter()函数中的事件，任何帮助都将不胜感激。

​

window.addEventListener("DOMContentLoaded", function() {
      var word = ['taco'];

      let randNum = Math.floor(Math.random() * word.length);
      let chosenWord = word[randNum];
      let underScore = [];

      let docUnderScore = document.getElementsByClassName('underScore');
      let docRightGuess = document.getElementsByClassName('rightGuess');
      let docWrongGuess = document.getElementsByClassName('wrongGuess');

      console.log(chosenWord); //lets grader cheat

      let generateUnderscore = () => {
        for (let i = 0; i < chosenWord.length; i++) {
          underScore.push('_');
        }
        return underScore;
      }


      document.onkeyup = function guessLetter(event) {
        let letter = String.fromCharCode(event.keyCode || event.code).toLowerCase();

        if (chosenWord.indexOf(letter) > -1) {
          rightWord.push(letter);
          underScore[chosenWord.indexOf(letter)] = letter;
          docUnderScore[0].innerHTML = underScore.join(' ');
          docRightGuess[0].innerHTML = rightWord;
          if (underScore.join('') === chosenWord) {
            alert('CONGRATS! YOU WIN!!!');
          } else {
            wrongWord.push(letter);
            docWrongGuess[0].innerHTML = wrongWord;
          }
        }
        underScore[0].innerHTML = generateUnderscore().join(' ');

      }
    });

<!DOCTYPE html>
<html>

<head>
  <h1> Hangman </h1>
  <div id="guesses">
    <div class="letter" id="letter" </div>
    </div>
</head>

<body>
</body>
<div class="container">
  <div class="underScore">_ _ _ _</div>
  <div class="rightGuess"> right guess </div>
  <div class="wrongGuess"> wrong guess </div>
</div>

</html>

​

Answer 1

在JS控制台中，由于尚未定义rightWord和wrongWord变量，因此会抛出ReferenceErrors。

Answer 2

你为什么要写in head标签？它不会显示在你的网页中，将html标签放在正文中。