javascript - 如何仅使用没有库的 javascript 从具有相同类的不同 div 获取值的总和？

Question

let sum = [];
for(i=1; i< 16; i++ ) {
    document.getElementsByClassName(`number${i}`).forEach(function() {
        sum += parseFloat(this.innerText()); 
    });
}

我建立了一个动态的 flexbox 表格，其中包含每天的学生姓名和他们的分数。您可以猜到有 15 个学生。现在我要做的是在单击更新按钮时计算每行中所有标记的总和。我已经为同一行中的单元格分配了 number1，... number15 类(number1 第一行 number2 第二行等)。到目前为止，我已经设法做到了这一点，但它不起作用。记住我不想使用 jquery，这只需要用 javascript 来完成。任何帮助将不胜感激。(我有一个添加按钮，它使用相同的类创建新的一天 onclick，所以 number1，number2 类代表数组带有标记的 div 作为文本节点。)

Answer 1

首先你必须初始化一个 Array来自 HTMLCollection通过使用 Array.from()静态方法，如果你想访问 ECMAScript 中的数组方法。然后你可以使用reduce()累加每个类名的总和，push()它进入 sum 数组:

const sum = [];

for (i = 1; i <= 15; i++) {
  const innerSum = Array.from(
    document.getElementsByClassName(`number${i}`)
  ).reduce(
    (acc, el) => acc + parseFloat(el.innerText),
    0
  );

  sum.push(innerSum);
}