如何将数组值对应添加到class为.score的div元素的textContent中

开发者阿泽

2026-5-7

问题分析与修复方案

嘿，我一眼就看出问题出在哪了！你这段代码里，在遍历每个.score元素的forEach循环内部，又嵌套了一个遍历整个nums数组的循环——这就导致每个元素都会被依次赋值成数组里的每一个值，等循环结束时，所有元素自然就只剩下数组的最后一个值（也就是28）了，完全不是你想要的一一对应效果。

下面给你两种简单的修复方案，都能实现第一个.score对应数组第一个值、第二个对应第二个值的需求：

方案一：利用`forEach`的索引参数

这是最简洁的写法，forEach的第二个参数会返回当前元素在集合中的索引，直接用它去匹配数组对应位置的值就行：

var nums = [15, 15, 14, 14, 13, 12, 12, 11, 11, 11, 28, 28];
function addValue() {
  var elements = document.querySelectorAll('.score');
  Array.from(elements).forEach((el, index) => {
    el.textContent = nums[index];
  });
}
addValue();

方案二：用普通`for`循环（逻辑更直观）

如果你觉得索引参数不太好理解，用普通的for循环也能达到同样的效果，逻辑更清晰：

var nums = [15, 15, 14, 14, 13, 12, 12, 11, 11, 11, 28, 28];
function addValue() {
  var elements = document.querySelectorAll('.score');
  for (let i = 0; i < elements.length; i++) {
    elements[i].textContent = nums[i];
  }
}
addValue();