Sum function issue with Javascript Array

Question

This works for my multiply function but when I try it with a simple +=, it produces the array values in sequence vs. adding them?

//sum()
function sum() {
    var val1 = document.getElementById('sumMulti').value;
    var array = val1.split(',');
    
    var arraySum = 0;
    for (var i = 0; i < array.length; i++) {
        arraySum += array[i];
        
    }
    document.getElementById('displayLabel').innerHTML = "The sum of your numbers is: " + arraySum.toString() + ".";
}

<div class="col-md-4">  
  <label class="control-label">Enter Numbers Seperated by ",":</label>
  <br />
  <input type="text" id="sumMulti" class=" form-control" />            
  <button type="submit" onclick="sum()" class="btn btn-primary pull-right" style="margin:20px 60px 10px 0px;">Sum()</button>
  
  <div id="displayLabel" class="control-label"></div>
    
</div>

Heri Hehe Setiawan · Accepted Answer · 2015-03-09 22:41:17Z

2

You need to parse the numbers into integers.

//sum()
function sum() {
    var val1 = document.getElementById('sumMulti').value;
    var array = val1.split(',');
    
    var arraySum = 0;
    for (var i = 0; i < array.length; i++) {
        arraySum += parseInt( array[i] );
        
    }
    document.getElementById('displayLabel').innerHTML = "The sum of your numbers is: " + arraySum.toString() + ".";
}

<div class="col-md-4">  
  <label class="control-label">Enter Numbers Seperated by ",":</label>
  <br />
  <input type="text" id="sumMulti" class=" form-control" />            
  <button type="submit" onclick="sum()" class="btn btn-primary pull-right" style="margin:20px 60px 10px 0px;">Sum()</button>
  
  <div id="displayLabel" class="control-label"></div>
    
</div>

answered Mar 9, 2015 at 22:41

Heri Hehe Setiawan

1,6332 gold badges15 silver badges21 bronze badges

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

1 Comment

Rick Hitchcock Over a year ago

parseFloat may work better in case there are non-integers in the input.

Austin Mullins · Accepted Answer · 2015-03-09 22:50:28Z

0

You need to learn to love the parseInt function.

The default radix is 10, but you can specify other bases as well (for example, sometimes it's handy to parse hexadecimal with parseInt(hexString, 16)).

If you expect real numbers, you may prefer parseFloat instead. It takes the same parameters.

As to why this worked for multiplication, Javascript is notorious for doing type conversions behind your back. Strings have a + operator (concatenate), so when you get the value of an input (which is a string before parsing) it will perform concatenation. However, strings do not have a * operator. Behind your back, the Javascript runtime attempts to parse the strings as decimal numbers and then multiply. This is not behavior I would count on, so I'd prefer to explicitly parse all inputs first and then perform arithmetic operations on them.

//sum()
function sum() {
    var val1 = document.getElementById('sumMulti').value;
    var array = val1.split(',');
    
    var arraySum = 0;
    for (var i = 0; i < array.length; i++) {
        arraySum += parseInt(array[i], 10);
        
    }
    document.getElementById('displayLabel').innerHTML = "The sum of your numbers is: " + arraySum.toString() + ".";
}

<div class="col-md-4">  
  <label class="control-label">Enter Numbers Seperated by ",":</label>
  <br />
  <input type="text" id="sumMulti" class=" form-control" />            
  <button type="submit" onclick="sum()" class="btn btn-primary pull-right" style="margin:20px 60px 10px 0px;">Sum()</button>
  
  <div id="displayLabel" class="control-label"></div>
    
</div>

edited Mar 9, 2015 at 22:50

answered Mar 9, 2015 at 22:43

Austin Mullins

7,4673 gold badges35 silver badges48 bronze badges

5 Comments

JReam Over a year ago

Thanks, Austin! Can you explain why the multiply function worked without the parseInt function?

Austin Mullins Over a year ago

Updated answer with explanation.

JReam Over a year ago

Outstanding, thank you! I would up vote your response but I'm new to SO so it won't let me :(

Austin Mullins Over a year ago

Try opening a console (F12 in IE, ctrl-shift-j in Chrome, I'm not sure about the others) and doing "5" + "5" and "5" * "5" to see JS messing with you. Then try "letters" * "are not numbers".

Austin Mullins Over a year ago

You can always accept the answer if it works for you :-)

Collectives™ on Stack Overflow

Sum function issue with Javascript Array

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related