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作为textnode。）

Answer 1

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

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。

Answer 2

首先，如果要访问ECMAScript中的数组方法，则必须使用Array静态方法从HTMLCollection初始化Array.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);
}

Answer 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>

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

3 个答案: