CODEWITHSUNDEEP
javascriptarraysfunction
JReam
JReam

Reputation: 898

Sum function issue with Javascript Array

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>

Upvotes: 0

Views: 56

Answers (2)

Austin Mullins
Austin Mullins

Reputation: 7427

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>

Upvotes: 0

Heri Hehe Setiawan
Heri Hehe Setiawan

Reputation: 1633

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>

Upvotes: 2

Related Questions