Postal知识测验JS计分功能问题：多条件判断与总分计算求助

第一步：规范HTML输入框结构 #

确保每个输入框有唯一标识，要么用不同ID，要么统一类名，避免重复ID导致获取元素错误。示例结构：

<!-- 问题1到10重复此结构 -->
<div class="quiz-item">
  <p>问题1：我国邮政编码的前两位代表什么？</p>
  <input type="text" class="quiz-answer" placeholder="输入答案">
</div>
<div class="quiz-item">
  <p>问题2：中国邮政的客服电话是多少？</p>
  <input type="text" class="quiz-answer" placeholder="输入答案">
</div>

<button onclick="calculateScore()">提交评分</button>
<p id="score-result">你的得分：0</p>

第二步：编写正确的JavaScript评分逻辑 #

用数组存储正确答案，通过遍历所有输入框逐一对比，累加得分。这种方式比嵌套if/else更简洁、易维护：

function calculateScore() {
  // 按顺序存储10道题的正确答案，和输入框顺序对应
  const correctAnswers = ['省/自治区/直辖市', '11185', '6位', '寄件人', '收件人', '航空', '陆运', 'EMS', '平邮', '挂号信'];
  let totalScore = 0;
  
  // 获取所有输入框元素
  const answerInputs = document.querySelectorAll('.quiz-answer');
  
  // 遍历每个输入框，对比答案
  answerInputs.forEach((input, index) => {
    // 处理用户输入：去掉前后空格、统一转小写，避免大小写/空格导致误判
    const userInput = input.value.trim().toLowerCase();
    const correct = correctAnswers[index].toLowerCase();
    
    if (userInput === correct) {
      totalScore++;
    }
  });
  
  // 显示最终得分
  document.getElementById('score-result').textContent = `你的得分：${totalScore}/10`;
}

为什么你的原有代码出问题？ #

1. 输入值获取错误：

   • 如果用了document.getElementById('answer')但所有输入框ID都是answer，只会返回第一个匹配的元素；
   • 如果用了document.querySelector('input')，同样只会获取页面中第一个input标签。
     解决核心是确保每个输入框能被单独或批量正确获取。

2. 多组if/else计算总分失败：

   • 嵌套的if/else容易出现逻辑重复、条件覆盖错误（比如else if的顺序问题）；
   • 手动写10组判断代码冗余，修改或维护时容易出错。用数组+循环的方式能避免这些问题。

额外优化建议 #

• 可以给答对的题目加样式提示：在if (userInput === correct)里添加input.style.borderColor = 'green'，答错的加input.style.borderColor = 'red'；
• 如果需要严格匹配（包括标点），可以去掉toLowerCase()，但建议保留以提升用户体验；
• 提交后可以禁用按钮，防止重复提交：document.querySelector('button').disabled = true。

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