JavaScript问答游戏开发：检测文本框正确单词并回车切换Div

嘿，我来帮你搞定这个猜角色名游戏的问题！你现在的代码只是单纯监听回车键就切换Div，缺少答案验证的逻辑，咱们来补上这部分，让游戏真正按照规则运行～

核心思路 #

我们需要先定义每个问题的正确答案，在用户按下回车键时，获取输入框的内容并和正确答案对比，只有匹配成功才切换到下一个问题的Div。

修改后的完整代码 #

HTML（优化默认显示逻辑）

<div id="ques1" class="ques">
  <img src="img/img1.png" alt="角色图片1">
  <div id="btncontainer" class="btncontainer">
    <input id="txtbox" placeholder="输入角色名，按回车提交"/>
  </div>
</div>
<div id="ques2" class="ques" style="display: none;"> <!-- 默认隐藏第二个问题，更符合游戏逻辑 -->
  <img src="img/img2.png" alt="角色图片2">
</div>

JavaScript（新增答案验证逻辑）

// 存储每个问题的正确答案，后续加新问题直接在这里扩展就行
const correctAnswers = {
  ques1: "Mario" // 替换成你这个问题对应的正确角色名
};

// 提前获取需要操作的DOM元素，避免每次触发事件都重新查找
const ques1 = document.getElementById('ques1');
const ques2 = document.getElementById('ques2');
const answerInput = document.getElementById('txtbox');

// 给输入框绑定回车键触发事件，比全局监听更精准
answerInput.addEventListener('keydown', function(e) {
  // 检查是否按下回车键
  if (e.key === 'Enter') {
    // 处理用户输入：去除首尾空格，转成小写（避免大小写敏感）
    const userAnswer = answerInput.value.trim().toLowerCase();
    // 获取当前问题的正确答案，同样转小写
    const rightAnswer = correctAnswers.ques1.toLowerCase();

    if (userAnswer === rightAnswer) {
      // 答案正确！切换到第二个问题
      ques1.style.display = 'none';
      ques2.style.display = 'block';
    } else {
      // 答案错误，给用户提示
      alert('不对哦，再想想看！');
      // 清空输入框，方便重新输入
      answerInput.value = '';
    }
  }
});

关键优化点说明 #

• 替代废弃的keyCode：用e.key === 'Enter'替代keyCode == 13，keyCode已经被Web标准废弃，e.key更直观且兼容性更好。
• 消除大小写敏感：把用户输入和正确答案都转成小写（或大写），避免用户输入"MARIO"或者"mario"被判定为错误。
• 去除无效空格：用trim()去掉输入内容的首尾空格，防止用户不小心输入空格导致答案匹配失败。
• 扩展性更强：用对象correctAnswers存储答案，后续添加第3、第4个问题时，只需要在对象里新增ques3: "xxx"这样的键值对，逻辑不用大改。
• 精准事件绑定：直接给输入框绑定事件，而不是全局监听整个文档的按键，这样只有在输入框里按回车才会触发，避免其他输入场景误操作。

如果后续要扩展更多问题，还可以把切换逻辑封装成一个函数，比如showNextQuestion(currentQuesId)，这样代码会更简洁易维护～

内容的提问来源于stack exchange，提问作者Iyves