如何用JS循环实现整数求和？目标结果为6，现有代码无法实现

你的代码问题在于空数组arr没有从HTML中提取任何数据，循环根本不会执行，所以sum始终为0。要实现求和，需要先从DOM中获取.gap元素的内容，再进行累加。

正确的循环实现代码 #

// 获取所有带gap类的span元素
const gapElements = document.querySelectorAll('.gap');
let sum = 0;

// 使用for循环遍历每个元素
for (let i = 0; i < gapElements.length; i++) {
    // 提取文本内容并转为整数，注意去除可能的空格
    const num = parseInt(gapElements[i].textContent.trim(), 10);
    sum += num;
}

console.log(sum); // 输出6

代码说明 #

1. document.querySelectorAll('.gap')：获取页面中所有class为gap的span元素，返回一个类数组对象。
2. textContent.trim()：提取元素的文本内容并去除前后空格，避免因空格导致转数字失败。
3. parseInt(..., 10)：把文本转为十进制整数，确保转换结果正确。
4. 循环遍历每个元素，将转换后的整数累加到sum中。

可选的简化写法（仍基于循环逻辑） #

如果你习惯用forEach循环，也可以这样写：

let sum = 0;
document.querySelectorAll('.gap').forEach(el => {
    sum += parseInt(el.textContent.trim(), 10);
});
console.log(sum);

内容的提问来源于stack exchange，提问作者Shailesh Chandra Malviya