Why is my jQuery each loop not adding values correctly?

Question

I am trying to get the values of several fields & add them together & in my testing I am having problems. I have this code:

var count;

function calculate() {

    // Fix jQuery conflicts
    jQuery.noConflict();

    count = 0;

    jQuery('.calculate').each(function() {

        var currentElement = jQuery(this);

        var value = currentElement.val();

        var count = count + value;

        alert(count);

    });

}

I enter in the value of "9" in my first field & when the first alert triggers I get "undefined9"; all the other values are currently set to "0"; when it triggers again I always get "undefined0".

Why am I getting the "undefined" bit & why is it only returning the value of the current field & not adding them together?

you're probably getting scope conflicts at var count = count + value; which is declaring count (so it's undefined) and then concatenating it with value. so yeah, change the names. — fbstj
– fbstj, Commented Mar 13, 2011 at 23:40

alex · Accepted Answer · 2011-03-13 23:38:28Z

6

You are dimensioning the count value inside the loop, essentially setting it to undefined first in each iteration.

You want to remove the var within the loop. This way, it doesn't have scope to the anonymous function and JavaScript will look at the parent function for its declaration.

It may also be a good idea to parseInt(count, 10) the number first, because JavaScript overloads the + operator to mean arithmetic addition and string concatenation, and you wouldn't want count to be "0something".

Finally, count += value is easier to read :)

answered Mar 13, 2011 at 23:38

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brett Over a year ago

Thanks very much. I removed the redeclaration of it & the undefined is now gone, but yeah.. it's concatenating it the wrong way as a string & not an int. Not sure where you mean where to put the parseInt() bit. Also thanks for the last tip.. wasn't sure how to do that with JS haha

Cameron Over a year ago

@Brett: val() is returning string values, not numbers. parseInt() takes a string and parses it into an integer; Your line would change to: count += parseInt(value, 10);

Cameron · Accepted Answer · 2011-03-13 23:44:57Z

5

You're accidentally re-declaring count:

var count = count + value;

should be:

count = count + value;

The count declared in the inner-most scope (that of calculate) will hide the other one (this is called "shadowing" of variables).

The reason you get "undefined9" is because the default value of the newly-declared count variable is undefined; when you add to it, it sees an undefined value on the left, and a number on the right, and decides that string concatenation is the best way to perform the addition, resulting in the string "undefined9".

It has to guess at your intended meaning since + is overloaded to mean both numerical addition and string concatenation; in this case, it guesses wrong.

edited Mar 13, 2011 at 23:44

answered Mar 13, 2011 at 23:39

Cameron

99.4k29 gold badges206 silver badges233 bronze badges

1 Comment

Cameron Over a year ago

@alex: Thanks. +1 to your answer because of parseInt, which I totally didn't realize was necessary here ;-)

Daniel Ahrnsbrak · Accepted Answer · 2011-03-13 23:39:03Z

0

You're defining count in two different scopes - the calculate function, and then in the function that each is using. You may want to have the second count be named something else, or at least don't redeclare it.

answered Mar 13, 2011 at 23:39

Daniel Ahrnsbrak

1,0878 silver badges15 bronze badges

Collectives™ on Stack Overflow

Why is my jQuery each loop not adding values correctly?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related