如何用JS校验用户输入值与选项列表？支持按钮/回车提交

你完全没必要把用户输入值写到DOM元素再读取——既然已经在事件监听里拿到了user_answer，直接用这个变量做校验就行，既省DOM操作的性能开销，还能简化代码。下面是优化后的完整方案：

1. 清理冗余HTML #

先删掉那个没用的<div class="user_answer" id="user_answer_for_js"></div>，不需要通过DOM中转数据。

2. 合并重复逻辑，复用处理函数 #

原来的点击按钮和回车提交逻辑几乎完全重复，把它们合并成同一个处理函数，减少代码冗余：

优化后的完整代码 #

HTML部分：

<div class="answer">
  <input type="text" placeholder="Enter your answer" class="answer_text" id="answer_text_box">
  <input type="button" value="Answer" class="submit_button" id="answer_submit_button">
</div>

JavaScript部分：

const answer_area = document.getElementById('answer_text_box');
const answer_btn = document.getElementById('answer_submit_button');

// 选项列表
const list_options = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// 加载事件监听
loadEventListeners();

function loadEventListeners() {
  // 点击提交按钮触发
  answer_btn.addEventListener('click', handleSubmit);
  // 回车触发
  answer_area.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') { // 用e.key比keyCode更直观，兼容性也更好
      handleSubmit(e);
    }
  });
}

// 统一的提交处理函数
function handleSubmit(e) {
  // 获取并清理输入值（去除首尾空格）
  const user_answer = answer_area.value.trim();
  
  // 校验逻辑：判断输入值是否在选项列表中
  // 如果你想忽略大小写，可以转成小写比对：
  // const isMatch = list_options.some(option => option.toLowerCase() === user_answer.toLowerCase());
  const isMatch = list_options.includes(user_answer);

  // 这里可以根据校验结果做后续处理，比如提示用户
  if (isMatch) {
    console.log('回答正确！');
    // 比如可以给输入框加成功样式，或者弹出提示
    answer_area.classList.add('correct');
  } else {
    console.log('回答错误，请重新输入');
    answer_area.classList.add('error');
    // 可以延迟移除错误样式，或者清空输入框
    setTimeout(() => answer_area.classList.remove('error'), 2000);
  }

  // 可选：清空输入框
  answer_area.value = '';

  e.preventDefault();
}

关键优化点说明 #

• 避免不必要的DOM操作：直接使用事件中获取的user_answer变量，不用把数据写到DOM再读取，减少浏览器重绘重排的开销。
• 代码复用：把两种提交方式的逻辑合并到handleSubmit函数，避免重复代码，后续修改逻辑只需要改这一个函数。
• 更友好的校验：可以通过toLowerCase()实现大小写不敏感的比对，提升用户体验；校验后可以给用户直观的反馈（比如样式变化、控制台提示）。
• 更现代的事件判断：用e.key === 'Enter'代替keyCode === 13，语义更清晰，兼容性也更好。

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