HTML文本框答题功能开发求助：JS验证答案失效

原代码存在的核心问题 #

• ID标识混乱：提交按钮使用了id="answer"，但文本输入框无对应ID，导致label的for属性无法正确关联输入框，且JavaScript获取到的是按钮元素而非输入框
• JS逻辑错误：提前在全局作用域获取元素，且直接将元素对象与字符串比较，未获取输入框的实际内容；点击时无法拿到用户实时输入的值
• 提交按钮类型问题：使用type="submit"会触发表单默认提交行为，可能导致页面刷新，打断验证逻辑

修正后的HTML代码 #

<div>
  <label for="answerInput">answer</label>
  <input id="answerInput" name="answer" type="text">
  <input id="submitBtn" type="button" value="submit" onclick="checkAnswer()">
</div>

<script src="puzzle2.js"></script>

修正后的JavaScript代码 #

function checkAnswer() {
  // 点击时获取输入框的实时内容
  const userInput = document.getElementById("answerInput").value.trim();
  
  if (userInput === "ok") {
    alert("correct");
  } else {
    alert("incorrect");
  }
}

修正说明 #

1. 给文本输入框添加唯一ID answerInput，确保label正确关联输入框，同时让JS能精准定位元素
2. 提交按钮改用type="button"，避免触发表单默认提交行为
3. 将函数名改为checkAnswer，避免与原生API或其他变量命名冲突
4. 在函数内部获取输入值，确保每次点击都能拿到用户最新输入的内容
5. 使用trim()去除输入内容首尾空格，提升验证的容错性
6. 用严格相等===进行判断，避免类型转换带来的意外错误

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