Loop through array and return sum of all values

2019-05-07 19:55发布

站内问答 / JavaScript
1339 4 6

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

  1. User inputs string
  2. String is split to array
  3. Loop through array and sum all numbers
  4. 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!

4条回答
做自己的国王
2楼-- · 2019-05-07 20:36

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.

查看更多
0人赞 添加讨论(0) 举报
SAY GOODBYE
3楼-- · 2019-05-07 20:43

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

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
4楼-- · 2019-05-07 20:46 
<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>
查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
5楼-- · 2019-05-07 20:47

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)