Loop through array and return sum of all values

Question

What I want to do is have numbers inputted by user and the sum of the numbers returned. My logic is as follows:

User inputs string
String is split to array
Loop through array and sum all numbers
Return sum

And here is the code I have so far:

<script type='text/javascript'>

var val=document.getElementById('userInput').value;
var temp=val.split(" ");

function sum() {
    for(var i=0, MISSING THIS BIT

    document.getElementById('resultSum').innerHTML=MISSING THIS BIT;
}

</script>

<form name="input">
    <textarea name="userInput" rows=20 cols=20></textarea>
    <input name="Run" type=Button value="run" onClick="sum()">
<form name="resultSum"><input type=Text>

I admit with humility that this is mostly probably wrong and appreciate anybody's time and effort.

UPDATE: I have done as suggested and I get the following error on my code below:

Message: 'document.getElementById(...)' is null or not an object Line: 16 Char: 1 Code: 0

<html>

<script type='text/javascript'>

function sum(){
    var val = document.getElementById('userInput').value;
    var temp = val.split(" ");

    var total = 0;
    var v;
    for(var i = 0; i < temp.length; i++) {
        v = parseFloat(temp[i]);
        if (!isNaN(v)) total += v;
    }

    document.getElementById('resultSum').innerHTML=total;

}

</script>

<form name="input">
    <textarea name="userInput" rows=20 cols=20></textarea>
    <input name="Run" type=Button value="run" onClick="sum()">
    <form name="resultSum"><input type=text>
<html>

Any suggestions? Thanks to all for being comprehensive - I have read both examples and understand the process now!

loganfsmyth · Accepted Answer · 2011-09-07T04:19:16.500

You want a basic loop to convert and add each item.

I have also cleaned up your HTML a ton. You didn't have any proper closing tags. I have also changed all of the 'name' attributes to 'id' attributes so that 'getElementById' would work properly, which I missed on my first pass.

<html>
  <head>
    <script type='text/javascript'>
      function sum(){ 
        var val = document.getElementById('userInput').value;
        var temp = val.split(" ");
        var total = 0;
        var v;
        for(var i = 0; i < temp.length; i++) {
          v = parseFloat(temp[i]);
          if (!isNaN(v)) total += v; 
        } 
        document.getElementById('resultSumValue').value = total; 
      } 
    </script>
  </head>
  <body>
    <form id="input">
      <textarea id="userInput" rows=20 cols=20></textarea> 
      <input id="Run" type=Button value="run" onClick="sum()" />
    </form>

    <form id="resultSum">
      <input id="resultSumValue" type="text" />
    </form>
  </body>
</html>

This will also ignore any values that are 'NaN' (Not a Number).

If you want the numbers to only be integers (no decimals), change parseFloat to parseInt.

Thank you so much - sorry for inconvenience (it is late in this part of the world and attention to detail is no highg right now). — tc03, Sep 07 '11 at 05:36

score 2 · Answer 2 · edited May 23 '17 at 12:19

2

Here is an outline, but I think it's worth writing it yourself to learn.

split() returns an array of characters. You can get the length of that array with temp.length
You'll want to loop over every element of that array.
Because "1" + "2" = "12" in javascript, you need to convert your characters to integers
Keep a running total of the sums, and add to it at each iteration of the loop, maybe validating that each number is a real number

edited May 23 '17 at 12:19

Community

1
1

answered Sep 07 '11 at 01:47

spike

9,794
9
54
85

+1 for a good explanation that gives enough info to work to the final answer without just doing it all and wrapping the final answer in a pretty bow. – nnnnnn Sep 07 '11 at 01:52

score 0 · Answer 3 · answered Sep 07 '11 at 01:45

0

First start by declaring a variable set to 0 before the for loop. Iterate over each element in the array (array.length) adding to the variable you set before the for loop.

answered Sep 07 '11 at 01:45

cp3

2,119
2
22
27

score 0 · Answer 4 · answered Sep 07 '11 at 04:38

0

<html>
<head>
<title>sum input</title>
<style>
p, textarea,input{font-size:24px}
textarea,input{text-align:right}
</style>
<script>
function sum(){
    var val= document.getElementById('userInput').value.replace(/^\D+|D+$/g,'');    
    document.getElementById('resultSum').value= eval(val.replace(/\D+/g,'+'));

}
</script>
</head>
<body>
<p>Enter a series of numbers :<br>
<textarea id="userInput" rows="10" cols="10"></textarea><br>
<input id="Run" type="button" value="Sum" onClick="sum()">
<input id="resultSum" type="text" readOnly>
</p>
</body>
</html>

answered Sep 07 '11 at 04:38

kennebec

102,654
32
106
127

Can you please explaing the 'replace' regexps? Seems very elegant, I just don't quite understand it all. – tc03 Sep 07 '11 at 05:18
So let me get this straight: first, this gets the values from userInput and then goes through all of them (g) and replaces non-digit values from start to finish (\D+|D+) with '' - in other words, it splits the string. Then, it replces all of the non-digit velaues to '=' signs which sums the split values...? – tc03 Sep 08 '11 at 02:33

Loop through array and return sum of all values

4 Answers4

Linked