Javascript 使用推送的输入值添加数组的和

我将一个输入值推送到一个空数组，并将其转换为一个数字。我正在尝试将数组相加并显示总和。但显示了整个阵列，没有进行任何添加。我已经在这里包括了一些代码，但我也将包括JS提琴，以防我忘记了一些重要的东西。我可能想得太多了，因为我已经看了一段时间了。 JS小提琴：

//HTML
糖计数器：
--
糖量
//JS
增值=[]；
//获取数据
var userInput=function（）{
返回parseFloat（document.getElementById（'amount'）.value）；
}
//存储数据
var newSugar=函数（）{
返回added.push（userInput（））；
}
//加总
函数总数（）{
var总和=0；
对于（变量i=0；i

您显示的是数组变量而不是总和变量。将sum变量分配给#total，而不是added变量

---

document.getElementById（'total'）。textContent=sum

该行在函数total（）中不正确：

更改为：

document.getElementById('total').textContent = sum;

---

这里有一个更新的提琴：

添加过程中没有问题。如果数组有效，

total（）

函数将正常工作。但是在

total（）

函数的最后一条语句中，您将

添加的

变量作为输出。但它应该是

sum

变量的值

function total() {
    var sum = 0;    
    for (var i = 0; i < added.length; i++) {
        sum += added[i];
    }
    document.getElementById('total').textContent = sum;
}

函数总数（）{
var总和=0；
对于（变量i=0；i

您需要一个按钮来执行求和以更新总数

Array.prototype.reduce

函数是一种简单的方法，可以计算列表中的总值

values.reduce((runningTotal, currentValue) => runningTotal + currentValue, initialValue)

var valueList=[]；
document.getElementById（'btn-add'）。addEventListener（'click'，onAddClick）；
函数onAddClick（e）{
var value=getCurrentValue（）；
如果（isNaN（值））{
警报（'值不是数字！'）；
回来
}
valueList.push（值）；
document.getElementById（'total'）.textContent=getTotal（）；
}
函数getCurrentValue（）{
返回parseFloat（document.getElementById（'amount'）.value.trim（））；
}
函数getTotal（）{
返回valueList.reduce（（a，b）=>a+b，0）；//对列表中的值求和
}

糖计数器：
总数：
--
糖量
total（）中的最后一行不应该是
document.getElementById（'total'）。textContent=sum？您正在使用数组
added
本身而不是
sum
document.getElementById（'total'）。textContent=sum
而不是
document.getElementById（'total'）。textContent=added完美！非常感谢。
function total() {
    var sum = 0;    
    for (var i = 0; i < added.length; i++) {
        sum += added[i];
    }
    document.getElementById('total').textContent = sum;
}

values.reduce((runningTotal, currentValue) => runningTotal + currentValue, initialValue)