JavaScript对错游戏分数更新问题：遍历类元素时全部变色而非对应题目

问题出在你遍历所有.score-elements元素时，每道题都把所有元素的颜色重新赋值了，导致所有元素同步变色。要只修改当前题对应的计分元素，试试下面的方法：

方法1：给计分元素加索引标识（推荐） #

先给每个计分div加上data-index属性，对应题目序号（从0到9）：

<div class="score-elements" data-index="0"></div>
<div class="score-elements" data-index="1"></div>
<!-- ... 直到第10个元素data-index="9" -->

然后在JS里记录当前是第几题（比如用currentQuestionIndex变量，初始为0，每答完一题加1），答题后直接定位到对应索引的元素修改颜色：

// 假设answerIsCorrect是判断答题对错的布尔值
const currentScoreElement = document.querySelector(`.score-elements[data-index="${currentQuestionIndex}"]`);
if (answerIsCorrect) {
  currentScoreElement.style.backgroundColor = 'green';
} else {
  currentScoreElement.style.backgroundColor = 'red';
}

方法2：直接通过元素集合索引定位 #

如果不想修改HTML，也可以直接获取所有计分元素的集合，通过当前题的索引直接访问对应元素：

const allScoreElements = document.querySelectorAll('.score-elements');
// currentQuestionIndex对应第几个元素（0对应第1题，1对应第2题...）
if (answerIsCorrect) {
  allScoreElements[currentQuestionIndex].style.backgroundColor = 'green';
} else {
  allScoreElements[currentQuestionIndex].style.backgroundColor = 'red';
}

核心逻辑就是：不要遍历所有计分元素，只定位当前题对应的那一个元素修改样式，这样就不会出现所有元素一起变色的问题了。

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