javascript - 为什么我的数组的总和没有在点击事件中返回？

Question

我正在开发一个项目，其中用户将数字添加到数组中，然后在单击事件中返回这些值的总和。然而，“总计”按钮只为我的“总计”变量返回 0。只是无法弄清楚我根据我在这里看到的设置总变量的概率:how to add array element values with javascript?

var times = [];

var total = 0;
for (var i = 0; i < times.length; i++) {
    total += +times[i];
}

document.getElementById("add").onclick = function () {
    times.push(1);
};

document.getElementById("total").onclick = function () {
    alert(times + " adds up to " + total);
};

这是我的 fiddle

Answer 1

JavaScript(在浏览器中)按顺序运行。当浏览器遇到这段代码时:

for (var i = 0; i < times.length; i++) {
    total += +times[i];
}

它会立即运行。您的点击处理程序 document.getElementById("total").onclick 需要在每次点击时重新计算总计。我建议使用函数来执行此操作:

var times = [];

var getTotal = function (arr) {
    return arr.reduce(function (currentSum, next) { return currentSum + next });
}

document.getElementById("add").onclick = function () {
    times.push(1);
};

document.getElementById("startsequence").onclick = function () {
    alert(times + " adds up to " + getTotal(times));
};

<button id="add">add</button>
<button id="startsequence">total</button>

Array.reduce 只是 for 循环的一个更高级的版本。您可以阅读文档 here .