答题提交后同时显示正确错误提示的前端功能问题排查

根本原因 #

当前代码仅在控制台打印判断结果，没有控制结果提示元素的显隐逻辑，页面默认会将.result_success和.result_fail两个元素同时展示，就是出现两条提示的核心原因。

具体修复内容 #

1. 新增基础CSS控制初始状态 #

先给结果元素增加默认隐藏样式，避免页面刚加载就显示两条提示：

.result p {
  display: none;
}

2. 修正JS逻辑，增加显隐控制 #

修正后的JS代码同时修复了原有代码的其他潜在问题：

submitButton.addEventListener("click", function(event) {
  event.preventDefault();
  // 改用id选择器精准获取输入框，避免页面有多个input时取值错误
  let userAnswer = document.querySelector('#answer_input').value.trim().toLowerCase();
  // 提前获取所有结果提示元素
  const successTip = document.querySelector('.result_success');
  const failTip = document.querySelector('.result_fail');
  const correctAnswerTip = document.querySelector('.result_correct-answer');
  // 每次提交前先隐藏所有结果，避免残留上一次的提示
  successTip.style.display = 'none';
  failTip.style.display = 'none';
  correctAnswerTip.style.display = 'none';

  if (userAnswer === currentClue.answer.toLowerCase()) {
    // 答对仅显示正确提示
    successTip.style.display = 'block';
  } else {
    // 答错显示错误提示，同时展示正确答案
    failTip.style.display = 'block';
    correctAnswerTip.textContent = `正确答案是：${currentClue.answer}`;
    correctAnswerTip.style.display = 'block';
  }
  // 可选：提交后清空输入框，方便下次答题
  document.querySelector('#answer_input').value = '';
});

3. 修正HTML属性错误 #

输入框的type属性没有answer这个合法取值，改为标准的text即可：

<form>
  <div id="question"></div>
  <input id="answer_input" type="text" placeholder="Enter Answer" required/>
  <button id="submit-button" type="submit">Submit</button>
</form>
<div class="result">
  <p class="result_success">Correct</p>
  <p class="result_fail">Incorrect</p>
  <p class="result_correct-answer"></p>
</div>

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