JavaScript获取用户输入及Hangman游戏键盘事件问题求助

我来帮你搞定这两个问题哈：

根据不同的使用场景，有几种常用的实现方式，给你举几个例子：

• 场景一：需要用户主动提交输入（比如输入框+按钮）
  这种方式适合需要用户确认后再显示内容的情况，代码示例：

<input type="text" id="userInput" placeholder="输入点啥试试">
<button onclick="showInput()">提交</button>
<div id="output"></div>

<script>
function showInput() {
  // 拿到输入框里的内容
  const inputValue = document.getElementById('userInput').value;
  // 把内容显示到页面的output元素里
  document.getElementById('output').textContent = `你输入的内容是：${inputValue}`;
}
</script>

• 场景二：实时显示输入内容
  如果想要用户输入的时候立刻看到效果，比如实时预览输入内容，可以用oninput事件：

<input type="text" id="userInput" placeholder="实时输入试试" oninput="showInput()">
<div id="output"></div>

<script>
function showInput() {
  const inputValue = document.getElementById('userInput').value;
  document.getElementById('output').textContent = `你现在输入的是：${inputValue}`;
}
</script>

• 场景三：用弹窗快速获取输入
  如果不需要额外的页面元素，只是临时获取简单输入，可以用prompt弹窗：

<div id="output"></div>

<script>
const userInput = prompt("请输入你的内容：");
if (userInput !== null) { // 要判断用户是不是点了取消按钮
  document.getElementById('output').textContent = `你输入的内容是：${userInput}`;
}
</script>

看了你的代码，确实有几个关键问题导致输入没反应，我帮你逐一修正，顺便解释下哪里错了：

先说说你的代码里的坑： #

1. rightWord和wrongWord没声明：你直接往这两个数组里push元素，但根本没提前定义它们，浏览器会报错，直接导致后续逻辑跑不起来。
2. if-else逻辑搞反了：你现在的else是嵌套在if里面的，意思是只有字母正确的时候才会执行else？这完全不对，应该是字母正确处理正确猜测，否则处理错误猜测。
3. generateUnderscore调用位置错了：每次键盘抬起都重新生成下划线，会把之前猜对的字母给覆盖掉，白猜了。
4. HTML结构有问题：比如<h1>放在了<head>里（应该在<body>里），还有标签没闭合、元素放在<body>外面的情况，这些都会导致DOM元素获取不到。

修正后的完整代码： #

<!DOCTYPE html>
<html>
<head>
  <title>Hangman</title>
</head>
<body>
  <h1> Hangman </h1>
  <div id="guesses">
    <div class="letter" id="letter"></div>
  </div>
  <div class="container">
    <div class="underScore"></div>
    <div class="rightGuess"> right guess </div>
    <div class="wrongGuess"> wrong guess </div>
  </div>

  <script>
    window.addEventListener("DOMContentLoaded", function() { 
      var word = ['taco']; 
      let randNum = Math.floor(Math.random() * word.length); 
      let chosenWord = word[randNum]; 
      let underScore = []; 
      // 补上之前缺失的数组声明
      let rightWord = [];
      let wrongWord = [];
      
      // 直接获取到第一个元素，避免每次都取数组[0]
      let docUnderScore = document.getElementsByClassName('underScore')[0]; 
      let docRightGuess = document.getElementsByClassName('rightGuess')[0]; 
      let docWrongGuess = document.getElementsByClassName('wrongGuess')[0]; 
      
      console.log(chosenWord); // lets grader cheat 
      
      let generateUnderscore = () => { 
        for (let i = 0; i < chosenWord.length; i++) { 
          underScore.push('_'); 
        } 
        return underScore; 
      } 
      
      // 页面加载完成后先生成初始的下划线
      docUnderScore.innerHTML = generateUnderscore().join(' ');
      
      document.onkeyup = function guessLetter(event) { 
        // 用event.key获取按键更靠谱，keyCode已经被废弃了
        let letter = event.key.toLowerCase();
        // 过滤掉非字母的按键，比如回车、空格这些
        if (!/[a-z]/.test(letter)) return;
        
        if (chosenWord.includes(letter)) { 
          // 避免同一个正确字母被重复添加
          if (!rightWord.includes(letter)) {
            rightWord.push(letter);
            // 处理单词里有重复字母的情况，比如"apple"里的两个p
            chosenWord.split('').forEach((char, index) => {
              if (char === letter) {
                underScore[index] = letter;
              }
            });
            docUnderScore.innerHTML = underScore.join(' '); 
            docRightGuess.innerHTML = `正确猜测：${rightWord.join(', ')}`; 
            
            // 判断是否已经猜中所有字母
            if (underScore.join('') === chosenWord) { 
              alert('CONGRATS! YOU WIN!!!'); 
            }
          }
        } else { 
          // 避免同一个错误字母被重复添加
          if (!wrongWord.includes(letter)) {
            wrongWord.push(letter);
            docWrongGuess.innerHTML = `错误猜测：${wrongWord.join(', ')}`; 
          }
        }
      } 
    }); 
  </script>
</body>
</html>

额外加了几个实用优化： #

• 过滤重复输入：不管是正确还是错误的字母，都不会被重复添加到列表里。
• 支持重复字母的单词：比如如果单词是"banana"，输入"a"会把所有下划线位置都替换掉。
• 按键过滤：只处理字母按键，避免误触其他键触发逻辑。
• 简化DOM元素获取：直接拿到第一个元素，不用每次都写[0]。

内容的提问来源于stack exchange，提问作者Raquel de Anda