如何比对HTML元素文本与对象数组值实现测验答题计分

问题概述 #

• 预期逻辑：比对用户选中的HTML答案元素内文本，与题目对象数组中对应题目的正确答案值，二者匹配时userScore计分变量自增，统计用户答对总题数
• 异常表现：功能运行时userScore始终返回初始定义的0值
• 已定位核心排查点：selectAnswer()函数逻辑

常见根因 #

selectAnswer()函数导致计分失效基本属于以下几类问题：

• 作用域错误：userScore定义在selectAnswer()函数内部，每次触发函数都会被重置为0，累加逻辑完全不生效
• 取值干扰：直接读取元素innerText/textContent时，答案文本前后带HTML缩进产生的换行、空格，和存储的标准答案做全等比对时匹配失败
• 匹配逻辑错误：取错题目索引，拿用户答案和非当前题目的正确答案做比对
• 事件绑定错误：点击答案时没有正确拿到选中项，每次读取到的都是固定位置的答案元素

错误代码示例 #

// 典型错误写法
function selectAnswer(e) {
  // 错误1：变量定义在函数内，每次调用重置为0
  const userScore = 0;
  // 错误2：取值未处理空白字符
  const selectedAns = e.target.innerText;
  // 错误3：未校验题目索引是否对应
  if (selectedAns === questions.correctAnswer) {
    userScore++
  }
}

修复后参考代码 #

JavaScript逻辑 #

// 计分变量、当前题号、题库定义在函数外层作用域，避免被重置
let userScore = 0;
let currentQuestionIndex = 0;
const questions = [
  // 题目对象示例
  {
    question: "以下哪个是JS的原始数据类型？",
    answers: ["Object", "Array", "String", "Function"],
    correctAnswer: "String"
  }
  // 其余题目...
]

function selectAnswer(e) {
  // 过滤无效点击
  if (!e.target.classList.contains('answer-item')) return
  // 取文本后统一去除首尾空白字符，避免缩进换行干扰比对
  const selectedAnswer = e.target.textContent.trim();
  const currentCorrectAnswer = questions[currentQuestionIndex].correctAnswer.trim();

  if (selectedAnswer === currentCorrectAnswer) {
    userScore++;
  }

  // 后续选中态样式、切题逻辑可在此补充
}

// 事件绑定
const answerWrap = document.querySelector('.answer-options');
answerWrap.addEventListener('click', selectAnswer);

对应HTML结构 #

<div class="quiz-card">
  <h3 class="question-title"></h3>
  <div class="answer-options">
    <div class="answer-item"></div>
    <div class="answer-item"></div>
    <div class="answer-item"></div>
    <div class="answer-item"></div>
  </div>
  <button class="next-question">下一题</button>
  <div class="score-show"></div>
</div>

快速排查技巧：在比对逻辑前加console.log('选中答案:', selectedAnswer, '正确答案:', currentCorrectAnswer, '当前分数:', userScore)，打开浏览器控制台查看三个值的实际输出，1分钟就能定位具体是哪一步出问题。

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