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-07 04:19:16Z

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).

Community · Accepted Answer · 2017-05-23 12:19:26Z

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, 2017 at 12:19

CommunityBot

11 silver badge

answered Sep 7, 2011 at 1:47

spike

10.1k9 gold badges57 silver badges88 bronze badges

1 Comment

nnnnnn Over a year ago

+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.

cp3 · Accepted Answer · 2011-09-07 01:45:32Z

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 7, 2011 at 1:45

cp3

2,1392 gold badges22 silver badges27 bronze badges

Comments

kennebec · Accepted Answer · 2011-09-07 04:38:20Z

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 7, 2011 at 4:38

kennebec

105k32 gold badges109 silver badges127 bronze badges

2 Comments

tc03 Over a year ago

Can you please explaing the 'replace' regexps? Seems very elegant, I just don't quite understand it all.

tc03 Over a year ago

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...?

Collectives™ on Stack Overflow

Loop through array and return sum of all values

4 Answers 4

1 Comment

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

2 Comments

Linked

Related