Javascript数组的总和函数问题

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> 

Answer 1

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> 

Answer 2

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>