时间戳

首页 > 解决方案 > 如何仅使用没有库的 javascript 从具有相同类的不同 div 中获取值的总和？

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

问题描述

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。）

标签： javascript

解决方案

首先，如果您想访问 ECMAScript 中的数组方法，您必须使用静态方法初始化一个Array。然后您可以使用从每个类名中累积总和，并将其放入数组中：HTMLCollectionArray.from()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);
}

推荐阅读