issue to sum fields

Question

This is a basic html/javascript code, but I am having issues getting the sum of all fields. (The are 50 fields in the original project, but now I just leave 5)

If the field is blank, it just has to ignore it, and add only those with filled fields.

HTML code:

value1:<input type="text" id="total_1" ><br>
value2:<input type="text" id="total_2" ><br>
value3:<input type="text" id="total_3" ><br>
value4:<input type="text" id="total_4" ><br>
value5:<input type="text" id="total_5" ><br>
total:<input type="text" id="totalresult" >
<button type="button" onclick="getTotal(); return false;">Get total</button>

Javascript:

function getTotal() {
var sum;
for (i = 1; i <=5 ; i++) {
    var total = document.getElementById('total_' + i.toString()).value;
    if (total != '') {
        sum = parseFloat(total) + sum;
        document.getElementById('totalresult').value = sum;
    }

  }

}

I don't know why my code is isn't working.

Here is my Fiddle

Parthik Gosar · Answer 1 · 2013-04-11T19:06:34.227

3

The first time your code runs, sum will be undefined.

Initialize

var sum = 0;

Also to make it work in the fiddle, you need to change

the onLoad on the left top to 'No wrap - in '

edited Apr 11 '13 at 19:06

answered Apr 11 '13 at 18:53

Parthik Gosar

10,998
3
24
16

thanks for replying @ParthikGosar tried that, but the issue still is there – Herland Cid Apr 11 '13 at 18:56

Andreas Louv · Answer 2 · 2013-04-11T19:04:04.350

1

I don't know why your fiddle can't figure out to make getTotal a global. But your main problem is that sum is undefined as start. This will result in NaN (Not a Number) :

var sum;

sum = 1 + sum; // NaN

....

sum = 1 + undefined; // NaN

sum = 1 + NaN; // NaN

Demo at jsbin.com

You should set sum equal zero at first:

var sum = 0;
for ( ... ) { ...

Working demo as adrianp pointed out: It would probably be more clear if you uploaded the working code to jsbin.

edited Apr 11 '13 at 19:04

answered Apr 11 '13 at 18:54

Andreas Louv

46,145
13
104
123

It would probably be more clear if you uploaded the working code to jsbin. – adrianp Apr 11 '13 at 19:02

defau1t · Answer 3 · 2013-04-12T06:51:58.477

1

You haven't defined sum variable so javascript takes that as NaN, which means Not a Number. You need to initilaize it to set it right.

  function getTotal() {
            var sum = 0;
    for (i = 1; i <=5 ; i++) {
    var total = document.getElementById('total_' + i.toString()).value;
if(isNaN(total) || total.indexOf(' ') == 1) {
    alert("Please type a number");
    document.getElementById("totalresult").value = "I cant sum alphanumerics";
    return false;
} 

if (total != '') {
    sum = parseFloat(total) + sum;
    document.getElementById('totalresult').value = sum;
}

} }

FIDDLE

edited Apr 12 '13 at 06:51

answered Apr 11 '13 at 18:55

defau1t

10,593
2
35
47

Doesn't work if you type a space or non-numeric character in a field. – j08691 Apr 11 '13 at 19:02
1

@j08691 Hard to believe that OP is considering production code. – adrianp Apr 11 '13 at 19:04
@j08691: Thanks, I edited the code a little for alphanumerics. – defau1t Apr 12 '13 at 06:53

score 1 · Accepted Answer · answered Apr 11 '13 at 19:00

You need to do two things. 1, initialize sum to zero. 2, check the input values for not being a number.

function getTotal() {
    var sum = 0;
    for (i = 1; i <= 5; i++) {
        var total = document.getElementById('total_' + i).value;
        if (!isNaN(parseFloat(total))) sum = parseFloat(total) + sum;
        document.getElementById('totalresult').value = sum;
    }
}

jsFiddle example

score 0 · Answer 5 · edited May 23 '17 at 12:12

0

Use IsNumeric function to check if the input field has a valid number. See: Validate decimal numbers in JavaScript - IsNumeric()

Here is my suggestion to improve the code inside your for loop:

var elementValue = document.getElementById('total_' + i).value
IsNumeric(elementValue) ? elementValue : elementValue = 0;

edited May 23 '17 at 12:12

Community

1
1

answered Apr 11 '13 at 19:26

Deepak

1
1

issue to sum fields

5 Answers5