Sum totals within an Array using JavaScript

Question

When calculating values within an Array I am getting this: total = "0212.16967.04". The correct total in this example is:1179.20

function calculateSum(){
  //build array of numbers
  amtArray = [];
  $('.amount').each(function (index, value) {		
    amtArray.push($(this).text()||0);
  });
  //calculate all values and return results 	
  var sum = sumArray(amtArray);
  console.log('sum ->', sum)
}
 
function sumArray(input) {
  var total = 0;
  for (idx=0; idx <= input.length-1; idx++) {
    total += input[idx];
  }
  return total;
}

calculateSum()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="amount">212.16</div>
<div class="amount">967.04</div>

Should output: 1179.20

Try "212.16" + "967.04" on the developer console - it's string concatenation. Convert to number before using the + operator. — le_m
– le_m, Commented Jun 13, 2017 at 14:58
Possible duplicate of Javascript (+) sign concatenates instead of giving sum of variables — C3roe
– C3roe, Commented Jun 13, 2017 at 14:59
use parseFloat() $('.amount').each(function (index, value) { amtArray.push(parseFloat($(this).text())||0); }); — Amani Ben Azzouz
– Amani Ben Azzouz, Commented Jun 13, 2017 at 15:00

Nina Scholz · Accepted Answer · 2017-06-13 14:58:41Z

4

You need to cast the value from string to number with an unary plus + (or by using Number or parseFloat, or any other operator which expects a number), otherwise if any of the operands is a string, all parts are treated as string and concatinated.

total += +input[idx];
//       ^

answered Jun 13, 2017 at 14:58

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

Comments

George · Accepted Answer · 2017-06-13 15:00:39Z

2

The error here is you are concatenating strings, here's a solution:

var array = ["212.16", "967.04"]

function sumArray(input) {
  var total = 0;
  for (idx = 0; idx <= input.length - 1; idx++) {
    total += parseFloat(input[idx]);
  }
  return total;
}

console.log(sumArray(array));

edited Jun 13, 2017 at 15:00

George

6,7592 gold badges31 silver badges36 bronze badges

answered Jun 13, 2017 at 14:59

dloeda

1,54815 silver badges24 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2021-04-29 04:25:22Z

1

In the function sumArray you can directly return the result of Array.prototype.reduce() using Number to work with numerical values:

const sumArray = arr =>  arr.reduce((a, b) => a + Number(b), 0);

console.log(sumArray(["212.16", "967.04"]));

edited Apr 29, 2021 at 4:25

answered Jun 13, 2017 at 15:07

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Comments

Jay Buckman · Accepted Answer · 2017-06-13 15:01:43Z

0

You are concatenating string values rather than adding flowing pointing numbers. You can use parseFloat() to convert from string to float like this this:

function sumArray(input) {  //input = (2) ["212.16", "967.04"]
    var total = 0;
    for (idx=0; idx <= input.length-1; idx++) {
        total += parseFloat(input[idx]);    
    }
    return total;  
}

answered Jun 13, 2017 at 15:01

Jay Buckman

5788 silver badges22 bronze badges

Comments

Rick · Accepted Answer · 2017-06-13 20:47:53Z

0

Aside from using a unary, parsefloat, Number you should also use toPrecision to get that last zero you indicated in your question

var val = document.getElementsByClassName('amount');

function calculateSum() {
  var total = 0;
  for (var i = 0; i < val.length; i++) {
    var value = val[i].textContent;
    total += +value;
  }
  return total.toPrecision(6);
}
val[1].insertAdjacentHTML('afterend', calculateSum());

<div class="amount">212.16</div>
<div class="amount">967.04</div>

answered Jun 13, 2017 at 20:47

Rick

1,05511 silver badges18 bronze badges

Collectives™ on Stack Overflow

Sum totals within an Array using JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related