Store values from input box in array to calculate sum

Question

I have a series of input boxes into which users will input numerical values to be stored in an array. I would like for these values to be added and their sum shown via an alert. However I cannot determine how to pass these values to the array via the click of a button like I hope to. Here is my code:

$('#check').click(function() {
    var arr = [];
  getSum = function() {
    for ( i = 0; i < 100; i++){
    arr[i] =
    $('input:number').map(function(){
        return this.value;
    });
    }
    var sum = 0;
    var n = arr.length;
for(var i = 0; i < n ; i++) {
sum += parseInt(arr[i]);

}
alert(sum);
}
 getSum();
});

with HTML markup:

<input type="number" id="field1" />
<input type="number" id="field2" />
<input type="number" id="field3" />
<button type="button" id="check">Calc</button>

Also, I have figured out how to dynamically add inputs so that the user may include more values in the sum, but I am not sure how this would affect the code. Would this still be sufficient?

incorrect selector :number doesn't exist AFAIK and map() returns an array. You are over complicating things — charlietfl
– charlietfl, Commented Jan 6, 2016 at 3:38

E. Sundin · Accepted Answer · 2016-01-06 03:37:08Z

4

I've shortened your code. input[type=number] is a proper selector for what you're trying to do and it will find all new dynamically created inputs with type number.

$('#check').click(function() {
    var sum = 0;
    $('input[type=number]').each(function(i, input) {
        sum += Number(input.value);
    });
    alert(sum);
});

answered Jan 6, 2016 at 3:37

E. Sundin

4,1901 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

newbie2015 Over a year ago

I set up this fiddle jsfiddle.net/P7QXa/27 , but it doesn't seem to work.

E. Sundin Over a year ago

@newbie2015 That fiddle works for me. What is it that does not seem to work?

newbie2015 Over a year ago

It didn't alert me of the sum. I was using Mozilla Firefox if that makes a difference. I just tried it on Safari and it worked no sweat.

newbie2015 Over a year ago

+1 for a solution that worked. I went for the @HarishKommuri solution below though, with my addition. Still, many thanks!

Harish Kommuri · Accepted Answer · 2016-01-06 04:11:36Z

1

 var arr = [], sum = 0;

 $("#check").click(function() {
   $("input[type=number]").each(function() {
      arr.push($(this).val());
      sum += $(this).val();
   });
});

answered Jan 6, 2016 at 4:11

Harish Kommuri

2,8641 gold badge24 silver badges29 bronze badges

1 Comment

newbie2015 Over a year ago

I added this to the sum += line: parseInt($(this).val()); so that it adds the values rather than just outputting them to an array. Thanks for a solution that, otherwise, works quite well.

Collectives™ on Stack Overflow

Store values from input box in array to calculate sum

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related