如何获取所有class为.amount的元素值存入JS数组并计算总和

实现方案 #

第一步：批量提取所有.amount类元素的值并生成数组 #

document.getElementsByClassName返回的是类数组的HTMLCollection对象，不能直接当成数组操作，你之前的写法只取了第一个元素的内容，无法得到所有值。你可以用以下两种方式生成只包含元素数值的数组：

// 方式1：扩展运算符转数组后遍历提取值
const amountArray = [...document.getElementsByClassName('amount')].map(el => {
  // 去除文本前后空格后转为数字，避免字符串拼接问题
  return Number(el.innerText.trim())
})

// 方式2：querySelectorAll配合Array.from简化写法
const amountArray = Array.from(document.querySelectorAll('.amount'), el => Number(el.innerText.trim()))

注意：提取文本后必须转成数字类型，否则后续求和会变成字符串拼接，得到错误结果。

第二步：修正求和逻辑 #

你原本的求和函数有两个问题：

1. 用const声明total，const定义的常量无法重新赋值，后续累加会报错
2. 用for in遍历数组会遍历到原型链上的非元素属性，容易出现异常
   修正后的函数写法：

function getArraySum(a){
    let total = 0;
    // 用for of遍历数组更安全
    for(const num of a) { 
        total += num;
    }
    return total;
}

console.log(getArraySum(amountArray));

更简化的求和实现 #

你可以直接用数组内置的reduce方法完成求和，不需要单独封装函数：

const totalSum = amountArray.reduce((sum, current) => sum + current, 0)
console.log(totalSum)

内容的提问来源于stack exchange，提问作者Warkus