Javascript For Loop index returning "[object Object] - undefined"

Question

I'm trying to run one function to many elements, so I'm using a for loop. I dont understand why i'm not getting any values.

    var i;
var aFields = ["#business1A","#business1B","#business1C","#business1D","#business2A","#business2B","#business2C","#business2D",
                "#business3A","#business3B","#business3C","#business3D","#business4A","#business4B","#business4C","#business4D",
                "#business5A","#business5B","#business5C","#business5D","#business6A","#business6B","#business6C","#business6D"];
for (i = 0; i < aFields.length; i++) {
    $(aFields[i]).keyup(function(){
        alert($(aFields[i]+'Warning') + " - " +$(aFields[i]).val());
    });
}

possible duplicate of Javascript closure inside loops - simple practical example — Barmar
– Barmar, Commented Dec 31, 2013 at 3:36

Ringo · Accepted Answer · 2013-12-31 03:38:52Z

1

Try this:

var i;
var aFields = ["#business1A","#business1B","#business1C","#business1D","#business2A","#business2B","#business2C","#business2D",
                "#business3A","#business3B","#business3C","#business3D","#business4A","#business4B","#business4C","#business4D",
                "#business5A","#business5B","#business5C","#business5D","#business6A","#business6B","#business6C","#business6D"];
for (i = 0; i < aFields.length; i++) {
  (function(j){
    $(aFields[j]).keyup(function(){
        alert(($(this).attr('id')+'Warning') + " - " +$(this).val());
    });
  })(i);
}

answered Dec 31, 2013 at 3:38

Ringo

3,9873 gold badges25 silver badges38 bronze badges

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

2 Comments

Dennis Over a year ago

wrapping it in a function is unnecessary if you are just going to use this. I'd definitely prefer it over the closure method, since it is cleaner.

Mike Spider Over a year ago

It works! Thanks a lot for the light speed replies! Stackoverflow Rocks! :p

Guffa · Accepted Answer · 2013-12-31 03:35:45Z

That's because you are using the variable i in the callback function for the event handler. The event happens when the loop has finished, so the variable contains an index that is beyond the last item in the array.

To use the value of the variable from the iteration where you bind the event, you can create a variable for each iteration by creating a scope, using an immediately executed function expression:

var i;
var aFields = ["#business1A","#business1B","#business1C","#business1D","#business2A","#business2B","#business2C","#business2D",
                "#business3A","#business3B","#business3C","#business3D","#business4A","#business4B","#business4C","#business4D",
                "#business5A","#business5B","#business5C","#business5D","#business6A","#business6B","#business6C","#business6D"];
for (i = 0; i < aFields.length; i++) {
  (function(j){
    $(aFields[j]).keyup(function(){
        alert($(aFields[j]+'Warning') + " - " +$(aFields[j]).val());
    });
  })(i);
}

Arun P Johny · Accepted Answer · 2013-12-31 03:33:42Z

0

The problem here is the wrong usage of the closure variable i, the variable is shared between all the keyup handlers so when the loop ends i will have the value aFields.length so aFields[i] will return undefined.

Try

var aFields = ["#business1A", "#business1B", "#business1C", "#business1D", "#business2A", "#business2B", "#business2C", "#business2D",
    "#business3A", "#business3B", "#business3C", "#business3D", "#business4A", "#business4B", "#business4C", "#business4D",
    "#business5A", "#business5B", "#business5C", "#business5D", "#business6A", "#business6B", "#business6C", "#business6D"];

$.each(aFields, function (i, val) {
    $(val).keyup(function () {
        alert($(val + 'Warning') + " - " + $(val).val());
    });
})

answered Dec 31, 2013 at 3:33

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

Mike Spider Over a year ago

Thanks for your quick reply, However, I'm only getting the second value, the first still comes as "[object]".

Dennis Over a year ago

@MichelFigueiredo $(val + 'Warning') will evaluate to a jQuery object - what do you want there?

Mike Spider Over a year ago

i want to get hold of the actual id string so that I can pass into another function. that's working now. Cheers!

Dennis · Accepted Answer · 2013-12-31 03:47:08Z

0

The other answers are good explanations of how closures work, but the cleanest solution is to use this to refer to the selected object:

var i;
var aFields = ["#business1A","#business1B","#business1C","#business1D","#business2A","#business2B","#business2C","#business2D",
            "#business3A","#business3B","#business3C","#business3D","#business4A","#business4B","#business4C","#business4D",
            "#business5A","#business5B","#business5C","#business5D","#business6A","#business6B","#business6C","#business6D"];
for (i = 0; i < aFields.length; i++) {
    $(aFields[i]).keyup(function(){
        alert(this.id + ' Warning - ' + this.value);
    });
}

answered Dec 31, 2013 at 3:47

Dennis

32.7k12 gold badges66 silver badges79 bronze badges

Collectives™ on Stack Overflow

Javascript For Loop index returning "[object Object] - undefined"

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related