Function to add values of array returns NaN

Question

I have a HTML form with a text box that you can input a string like "1+2+8" and it will give you the total of the numbers.

My script is meant to add all of the numbers of the array "num" and alert the value. The problem is the alert displays NAN instead of the total. the values in num are floats but the alert still gives NaN. I have looked at this question but it is not the same problem. What could be causing this?

Here is the HTML/JS

<html>
  <head>
    <script type="text/javascript">


      function handleClick(event)
      {



        alert(this.textBox1.value);

        var num = this.textBox1.value.split("+"); 


        //convert string array to numbers
        for(var i=0; i<num.length; i++)
        {
            num[i] = +num[i]; 
        }

       // add up the values
        for(var i=0; i<num.length; i++)
        {
            var total = i + total;
        }
        alert(total); //Displays NaN instead of total



        event.preventDefault(); // disable normal form submit behavior
        return false; // prevent further bubbling of event
      }
      function doit()
      {

        document.forms.myform.addEventListener("submit", handleClick, true);
        return true;
      }
    </script>
  </head>


  <body onload="doit()">
    <form name="myform">
      <div>
          <textarea name="textBox1" rows="10" cols="80">
1+1
         </textarea>
      </div>
      <input type="submit" value="Update"/>

    </form>
  </body>
</html>

In the first iteration of your loop, `i + total` is `0 + undefined` which is `NaN`. Hence any other operation results in `NaN`. You have to initialize `i` with a meaningful value. — Felix Kling, Mar 16 '14 at 07:47

score 3 · Accepted Answer · edited Mar 16 '14 at 21:54

3

Declare total variable outside the for loop and initialize it to 0. You also have to access the actually value in the array (num[i]), not the loop variable (i).

Here is the solution:

var total = 0;
for(var i=0; i<num.length; i++)
{
    total = num[i] + total;
}

edited Mar 16 '14 at 21:54

Felix Kling

795,719
175
1,089
1,143

answered Mar 16 '14 at 07:36

Bhavesh Munot

675
1
6
13

That has fixed the NaN problem but now I am getting very odd results such as 5+5+5+5 = 6 and 5+5 = 1 – Qwertie Mar 16 '14 at 07:42
1

@qwertie: you certainly don't want to add the loop variable i to the result. – Felix Kling Mar 16 '14 at 07:44
1

@FelixKling I should have seen that. It should be num[i] – Qwertie Mar 16 '14 at 07:52

score 0 · Answer 2 · answered Mar 16 '14 at 07:32

0

Try to explicitly parse it to float using parseFloat() function

eg

parseFloat("3.14");

You can read the documentation at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat

answered Mar 16 '14 at 07:32

AurA

12,135
7
46
63

I have tried changing it to "num[i] = parseFloat(i);" but that has the same problem – Qwertie Mar 16 '14 at 07:36

score 0 · Answer 3 · answered Mar 16 '14 at 07:33

0

Use parseInt() function when converting string to Integer. And parseFloat for supporting non integer numbers.

answered Mar 16 '14 at 07:33

dlyaza

238
2
9

Function to add values of array returns NaN

3 Answers3