배열에 숫자를 추가하고 더 많은 숫자가 배열에 추가되면 숫자를 재평가하고 추가하는 방법은 무엇입니까?

Question

배열에 숫자를 추가하고 추가 된 숫자로 DOM을 업데이트하려고합니다. 그런 다음 더 많은 숫자가 배열에 추가되면 더하기 함수가 다시 실행될 때 배열이 다시 평가되고 배열에서 숫자가 더하는 값으로 DOM이 업데이트됩니다. http://jsfiddle.net/scu67aou/2/

현재, 그것은 단지 배열의 마지막 번호를 표시하고, 배열에 어떤 추가되지 않은 : 여기

는 바이올린입니다. 어떤 도움을 주셔서 감사합니다.

자바 스크립트 :

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에 새 값을 추가해야합니다. 상기 입력에

$('.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

체크 아웃이 바이올린 : 나는 Array.reduce을 사용 예제를 위해 numb에 추가하기 전에 당신의 infoStuff에 parseInt를 실행 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)); 
}); 

, 당신은 변경할 수 있습니다 그것은 당신이 십진법을 가지고 가고 싶다는 것을.