如何在數組中添加數字，並在將更多數字添加到數組中時重新評估和添加數字？

Question

我想在數組中添加數字並用添加的數字更新DOM。然後，當更多數字被添加到數組中時，再次運行加法函數時，將重新評估該數組，並使用陣列中的數字加起來更新DOM。

這裏是一個小提琴：http://jsfiddle.net/scu67aou/2/

目前，它僅在數組中顯示的最後一個數字，並且不添加什麼是在數組中。謝謝你的幫助。

的JavaScript：

var numb = []; 
var total = ''; 

$('.new').on('click', function(){ 
    var infoStuff = $('.to-add input').val(); 
    $('.added').append('<div class="test">'+ infoStuff + '</div>'); 
    numb.push(infoStuff); 
}); 

$('.button').on('click', function(){ 
    for(var i=0; i < numb.length; i++){ 
     total = Number(numb[i]); 
    } 
    $('.total').html(total); 
}); 

Answer 1

您需要將新值添加到循環內的total，而不是將新值賦給它。此外，聲明total作爲一個局部變量 - 否則新的號碼將被添加到總以前計算的：

$('.button').on('click', function() { 
    var total=0; // local variable, starts with 0 every time 
    for (var i = 0; i < numb.length; i++) { 
    total += Number(numb[i]); // add the number to existing total 
    } 
    $('.total').html(total); 
}); 

Updated Fiddle

Answer 2

看看這個小提琴：http://jsfiddle.net/t8htbo5u/3/

var numb = []; 

$('.new').on('click', function(){ 
     var infoStuff = $('.to-add input').val(); 
     $('.added').append('<div class="test">'+ infoStuff + '</div>'); 
     numb.push(parseInt(infoStuff)); 
}); 

$('.button').on('click', function(){ 
    $('.total').html(numb.reduce(function(prev, curr){ 
     return prev + curr; 
    }, 0)); 
}); 

我用Array.reduce並將其添加到numb的例子的目的之前，您infoStuff跑parseInt，您可以更改你想要小數。