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

【问题标题】：How can I get sum of values from different divs with the same class using only javascript without libraries?如何仅使用没有库的 javascript 从具有相同类的不同 div 中获取值的总和？
【发布时间】：2018-07-06 05:34:18
【问题描述】：

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

【问题讨论】：

let sum = 0 而不是数组
是的，但我需要所有行的总和，如果我将 sum 声明为变量，它将被覆盖，并且在最好的情况下，我只会留下最后一行的总和......跨度>
我想保存所有原始数据的总和，这就是问题
+= 不是这样工作的。如果您改用 =，那您是正确的，但 += 采用当前的 sum 并添加运算符右侧的任何内容。
编辑您的帖子并将带有 HTML 的代码添加为 sn-p 会很有帮助。

标签： javascript

【解决方案1】：

首先，如果您想访问 ECMAScript 中的数组方法，您必须使用 Array.from() 静态方法从 HTMLCollection 初始化一个 Array。然后你可以使用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);
}

【讨论】：

我仍然知道 el.innerText 不是函数
@goga 我的错，那是你的代码遗留的错误。
还有一个小问题。我已经把它放在更新按钮的 addlistener 中，当我点击按钮时，这条消息出现了标识符“总和”已经被声明。我该如何解决这个问题，以便在每次点击按钮时刷新总和并获得新的含义。表格是动态的，我在每个单元格中输入值并提示。
@goga 你没有在你的问题中分享相关代码，所以不在我的回答范围内，但是根据你的描述，你的事件监听函数已经声明了一个变量sum在同一范围内。使用调试器时请点击错误代码中的行号，它将显示修复错误的位置。
当我执行事件时，仍然没有将新值添加到数组的成员中。有什么解决办法？

【解决方案2】：

您应该能够通过在循环中添加一个变量来完成此操作。这将为每个学生重置，总结他们的成绩，然后将其添加到您的总和数组中：

let sum = [];
for(i=1; i< 16; i++ ) {
    let studentSum = 0;
    document.querySelectorAll(`.number${i}`).forEach(function(ele) {
        studentSum += parseFloat(ele.innerText()); 
    });
    sum.push(studentSum)
}

编辑：

如上所述，您不能使用 document.getElementsByClassName(..).forEach 尝试 document.querySelectorAll(..).forEach。

【讨论】：

document.getElementsByClassName(...).forEach is not a function 最重要的是，this 不会引用回调中的每个元素，因为forEach() 不会绑定函数的上下文。
是的，它确实不是一个函数。这就是问题
它是 html 集合，似乎 forEach 无法将其识别为数组
定义HTMLCollection类的W3C规范没有实现forEach()方法。当前的草案确实在document.querySelectorAll() 返回的NodeList 上实现了forEach()，但我仍然认为这不是一个好方法。

【解决方案3】：

不确定这是否是您要求的，但请尝试看看是否适合您：

const sum = [];
const students = document.querySelectorAll('.student');

for(student of students) {
        sum.push(parseFloat(student.innerText));             
}
console.log(sum);

<div class="student">1</div>
<div class="student">2</div>
<div class="student">3</div>

【讨论】：

与 OP 解释的他们试图做的不太一样。看看我的回答，我很确定它是正确的。