本文讲解如何在多题型真/假测验中，通过 questionIndex 精准定位并更新唯一对应的得分元素（如 .score-elements），避免全量遍历导致所有指示器同步变色的常见错误。
本文讲解如何在多题型真/假测验中，通过 `questionindex` 精准定位并更新唯一对应的得分元素（如 `.score-elements`），避免全量遍历导致所有指示器同步变色的常见错误。
在构建 JavaScript 真/假互动游戏时，一个典型需求是：每答完一题，就在顶部或侧边的“得分栏”中高亮当前题号对应的指示器——答对为绿色，答错为红色。常见错误是使用 for 循环遍历全部 .score-elements 元素，结果每次操作都修改了全部 10 个 div，丧失了逐题反馈的意义。
问题核心在于混淆了「批量操作」与「按序定位」：.score-elements 是一组共 10 个同类元素（对应 10 道题），而当前答题进度由 questionIndex（初始为 0）精确标识。因此，只需更新 scoreBar[questionIndex] 即可，无需循环。
✅ 正确做法如下：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
function checkAnswer() {
const currentQuestion = questionsAnswers[questionIndex];
const correctAnswer = currentQuestion.correctAnswer;
const scoreBar = document.getElementsByClassName("score-elements");
// 利用 questionIndex 直接索引对应元素（注意：index 从 0 开始）
const targetScoreElement = scoreBar[questionIndex];
if (!targetScoreElement) {
console.warn(`No score element found for question ${questionIndex}`);
return;
}
// 统一设置颜色，提升可维护性
const color = userAnswer === correctAnswer ? "green" : "red";
targetScoreElement.style.backgroundColor = color;
questionIndex++;
loadQuestion();
}? 关键注意事项：
立即学习“Java免费学习笔记（深入）”；
-
索引有效性校验：
scoreBar[questionIndex]可能为undefined（例如questionIndex ≥ 10或 DOM 尚未加载完成），建议添加存在性判断，避免运行时报错； -
CSS 属性名准确：
style.backgroundColor（驼峰命名），而非backgroundcolor（原文答案中存在拼写错误，已修正）； -
DOM 加载时机：确保
getElementsByClassName执行前，所有.score-elements已存在于 DOM 中（推荐在DOMContentLoaded后初始化或使用document.querySelectorAll('.score-elements')替代，后者返回静态 NodeList 更易操作）； -
扩展性优化：若后续需支持重答、跳题或动画效果，可将颜色逻辑封装为独立函数，或改用 CSS 类（如
score-correct/score-incorrect）控制样式，便于主题定制与性能优化。
? 小结：迭代 ≠ 循环全部；在有序结构中，下标（questionIndex）就是最高效、最语义化的访问钥匙。掌握这一思维，不仅能修复本例的视觉反馈问题，更能提升你在表单状态管理、分步流程控制等场景中的代码健壮性与可读性。
