优化Vanilla JS实现选择题选项输入框边框样式匹配功能

核心问题 #

你当前代码的逻辑完全搞反了：在选项输入框的keyup事件里，先把当前输入框的值赋值给了正确答案框inpCorrect.value = this.value，导致this.value == inpCorrect.value永远为真，所以边框一直是绿色，根本不会触发黑色边框的情况。

优化后的完整实现 #

HTML（修正label关联错误）

<div id="choices">
  <div>
    <label for="choicesA">Choices A:</label>
    <input type="text" id="choicesA">
  </div>
  <div>
    <label for="choicesB">Choices B:</label>
    <input type="text" id="choicesB">
  </div>
  <div>
    <label for="choicesC">Choices C:</label>
    <input type="text" id="choicesC">
  </div>
  <div>
    <label for="choicesD">Choices D:</label>
    <input type="text" id="choicesD">
  </div>
</div>
<br><br>
<label for="correct">Correct Answer:</label>
<input type="text" id="correct">

CSS（用类控制样式，更易维护）

#choices {
  display: flex;
  flex-direction: column;
  width: 50%;
  gap: 20px;
}
input {
  outline: none;
  border: 2px solid black; /* 默认黑色边框 */
}
input.green-border {
  border-color: green; /* 匹配时的绿色边框 */
}

JavaScript（精简逻辑，统一处理）

const choiceInputs = document.querySelectorAll("#choices input");
const correctInput = document.querySelector("#correct");

// 统一的样式更新函数
function updateBorderStyles() {
  const correctValue = correctInput.value.trim();
  choiceInputs.forEach(input => {
    const inputValue = input.value.trim();
    // 根据值是否匹配添加/移除类
    input.classList.toggle("green-border", inputValue === correctValue);
  });
}

// 给所有选项输入框绑定input事件（覆盖所有输入场景：键盘、粘贴等）
choiceInputs.forEach(input => {
  input.addEventListener("input", updateBorderStyles);
  
  // 保留点击选项快速填充正确答案的功能（如果需要的话）
  input.addEventListener("click", () => {
    correctInput.value = input.value;
    updateBorderStyles(); // 填充后立即更新样式
  });
});

// 正确答案输入框变化时也触发样式更新
correctInput.addEventListener("input", updateBorderStyles);

优化点说明 #

1. 修正逻辑错误：不再覆盖正确答案框的值，而是对比选项框与正确答案框的当前值。
2. CSS类管理样式：避免直接操作元素style属性，后续修改样式只需调整CSS，更符合前端开发规范。
3. 统一处理函数：把样式更新逻辑抽成独立函数，所有触发场景（选项输入、正确答案输入、点击选项填充）都调用这个函数，减少冗余代码。
4. 使用input事件：相比keyup，input事件能响应所有输入方式（比如鼠标粘贴、输入法联想输入），交互更完整。
5. 修正label关联：原HTML中所有label的for属性都指向correct，点击选项标签会错误聚焦到正确答案框，现在改成对应选项的input id，修复了这个交互问题。

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