I'm trying to loop through my totals in order to get a grand total for my web app. So far the code I am working with is the following:

function calcAllFields() {
    var name = parseFloat($('div [name = total[]]').text());
    var totArray = $.makeArray(name);
    var total = 0;
        for (var i = 0; i < totArray.length; i++) {
                total += totArray[i];
                }
    $("#target1").text(total);
}

Instead of adding integers, something is being read as a string. Say I want to add 200 + 50, instead of 250 I get 20050. Could anyone please point out what I'm doing wrong? Thanks!

I'm trying to loop through my totals in order to get a grand total for my web app. So far the code I am working with is the following:

function calcAllFields() {
    var name = parseFloat($('div [name = total[]]').text());
    var totArray = $.makeArray(name);
    var total = 0;
        for (var i = 0; i < totArray.length; i++) {
                total += totArray[i];
                }
    $("#target1").text(total);
}

Instead of adding integers, something is being read as a string. Say I want to add 200 + 50, instead of 250 I get 20050. Could anyone please point out what I'm doing wrong? Thanks!

• javascript
• jquery

• You should really use JQuery for this its faster :) – JonH Commented May 28, 2010 at 19:04
• @JonH, how exactly would more jQuery help here? – Tatu Ulmanen Commented May 28, 2010 at 19:11
• @Tatu it is an on going joke on the site about using JQuery, it's one of the first answers people e up with when there is an issue. How would it help here - it wouldn't. – JonH Commented May 28, 2010 at 19:13

5 Answers 5

Use parseInt to ensure you're not concatenating a string.

E.g.:

total += parseInt(totArray[i], 10);

div[name=total[]] probably contains multiple element's so that might cause some weird behaviour. Try this:

function calcAllFields() {
    var total = 0;
    $('div[name=total[]]').each(function() {
        total += parseFloat($(this).text());
    }
    $("#target1").text(total);
}

You can cast to a number using +, or Number():

(+"200") + (+"50")              //-> 250
Number("200") + Number("50")    //-> 250

total += +totArray[i]; 

Personally, I prefer using + over parseInt/parseFloat in many situations because those functions will return a number as long as the string starts with a number, e.g. 1,000 would parse as 1. +"1,000" will return NaN, which is more desired IMO. You don't have to worry about the radix either, as +"010" will not be treated as an octal.

have you tried?

total+= parseInt(totArray[i]);

I'm surprised you're getting as far as 20050. The code shouldn't really work at all.

$('div [name = total[]]')

Firstly, that's not a valid selector. You would have to escape or quote the attribute selector, otherwise the first ] in it closes the selector, leaving an invalid trailing second ].

It is only working at all because of a quirk (bug) in selector-parsing in jQuery/Sizzle. But because it's non-standard, (a) it might break in the future, and (b) it won't take advantage of the fast native querySelectorAll in modern browsers. Better:

$('div [name="total[]"]')

However you would need jQuery 1.4 for this because jQuery 1.3's attribute selector parsing was even more buggy and broke this case.

It might be better to avoid all these issues by just assigning a class to those elements and selecting on that instead.

$('div [name = total[]]').text()

What are the elements inside the div that have name="total[]"? I am supposing they are some sort of form controls otherwise the name attribute would be invalid. But text() is not the right way to read a form control. It gives you the textual content inside the element's tags, not the current value of the field.

<input>​s don't have textual content. <textarea> does have textual content, but it is not necessarily the same as the field's value. The textual content, like the value attribute of <input>, is the default-value of the field, not the current value. You should use val() to read the current value.

var totArray = $.makeArray(name);

That's no use. By calling text() on the selector wrapper object you have already thrown away the multiple elements you have in there to turn them into one text string. You can't get them back from a string. All makeArray does is give you an Array containing that single string as an item.

What you need to do is read the value of each input in turn, separately, in order to add them together.

var total= 0;
$('div [name="total[]"]').each(function() {
    total+= +$(this).val();
});
$("#target1").text(total);

(The + converts the value string into an integer, as per Andy's answer.)