如何为小型测验实现点击提交或按回车键提交答案的功能？

嘿，我懂你想要的效果——用户输入答案后，不管点提交按钮还是按回车都能触发提交逻辑对吧？你的现有代码已经有了核心的判断逻辑，我来帮你补全两种提交方式的绑定，让功能完整跑起来！

首先，我们先完善你的HTML结构（给表单加个ID方便操作，同时给按钮设置正确的type属性）：

<form id="quizForm">
  <input id="answer" type="text" placeholder="输入你的答案（y/Y）">
  <button id="btn" class="submit" type="submit">SUBMIT</button>
</form>
<div class="content-bd">这里会显示结果</div>

然后是JavaScript部分，我们可以把提交逻辑封装成一个函数，然后分别绑定到按钮点击事件、输入框的回车事件，以及表单的submit事件（这样能覆盖所有触发提交的场景）：

// 核心的提交处理回调函数
function handleSubmit(e) {
  // 阻止表单默认的提交刷新行为，避免页面跳转
  if (e) e.preventDefault();
  
  const myAnswer = document.getElementById('answer').value.trim();
  const contentBd = document.querySelector('.content-bd');
  
  if (myAnswer === "y" || myAnswer === "Y") {
    contentBd.innerHTML="答对啦！🎉";
  } else {
    contentBd.innerHTML="不对哦，再试试？😯";
  }
  
  // 可选操作：提交后清空输入框，方便用户再次输入
  document.getElementById('answer').value = '';
}

// 绑定按钮点击事件
document.getElementById('btn').addEventListener('click', handleSubmit);

// 绑定输入框回车事件：监听Enter键触发提交
document.getElementById('answer').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    handleSubmit(e);
  }
});

// 绑定表单submit事件（兜底处理，确保任何表单提交触发都能被捕获）
document.getElementById('quizForm').addEventListener('submit', handleSubmit);

这么做的好处： #

• 把提交逻辑抽成独立函数handleSubmit，避免重复写代码，后续修改判断规则也更方便
• 阻止表单默认行为是关键，不然提交后页面会刷新，之前的结果直接就没了
• 同时绑定三种事件，能覆盖用户所有可能的操作场景，不管是点按钮、按回车，甚至是浏览器默认的表单触发行为，都能正常响应

这样一来，用户不管是点击SUBMIT按钮，还是在输入框里按回车键，都会触发你的判断逻辑，更新页面内容啦！

内容的提问来源于stack exchange，提问作者Al-76