javascript: addEventListener in loop not working. passing same parameter to function with each loop

Question

I have tried the solutions offered in these two threads, however, none of them are working.

Javascript multiple dynamic addEventListener created in for loop - passing parameters not working

JavaScript closure inside loops – simple practical example

So here is where I am at.

Here is my loop:

var eduWidths = [415.66, 116.13];

function eduResize(j,el){
            var edu = document.getElementById(el);
            console.log("j: "+j+" , el: "+ el +" , eduWidths[j]: "+eduWidths[j]); //output: "j: 1 , el: edu0 , eduWidths[j]: 116.13"

             //this does not work, j is always "1"
            $(edu).animate({width: eduWidths[j]+'px'}, 500);
        }

for(i=0; i<edus.length; i++){
    var edu = document.getElementById('edu'+i);

    edu.addEventListener("mouseover",function(){
        //this works without any problem
        $(this).animate({width:'400px'}, 500);
    });

    var j=0;
    edu.addEventListener('mouseleave', function() {
        //this does call the eduResize function, and passes j and this.id
            eduResize(j,this.id);

        });
    j++;
}

Despite having the correct target, the target div is always resizing using the 1 index position of eduWidths[] array on this line:

$(edu).animate({width: eduWidths[j]+'px'}, 500);

UPDATE: Here is the HTML:

<div class="eduEvent" id="edu0" ></div>
<div class="eduEvent" id="edu1" ></div>

Need HTML, I'm not sure whether you have multiple elements involved or if you have just one. — zer00ne
– zer00ne, Commented Aug 3, 2016 at 18:55
You'll probably want to assign that ` var j=0;` outside your loop. It will always be 0 inside your eventlistener now (or why not use i) — Pevara
– Pevara, Commented Aug 3, 2016 at 18:58
So... what about the dupe did you not understand? I see you linked to it, but you didn't implement anything from it or explain how it isn't a dupe of this. — user400654
– user400654, Commented Aug 3, 2016 at 19:14

Livi17 · Accepted Answer · 2016-08-03 19:26:13Z

There was an answer here that was deleted, that helped me solve the problem.

Is this the most efficient and proper way to do this?

This is what eventually got it to work:

var eduWidths = [415.66, 116.13];

function eduResize(j,el){
            var edu = document.getElementById(el);
            console.log("j: "+j+" , el: "+ el +" , eduWidths[j]: "+eduWidths[j]);
            $(edu).animate({width: eduWidths[j]+'px'}, 500);
        }


for(i=0; i<edus.length; i++){
var edu = document.getElementById('edu'+i);

            edu.addEventListener("mouseover",function(){
                //this.style.width = "400px";
                $(this).animate({width:'400px'}, 500);
                //console.log("this.id: "+ this.id);
            });


            edu.addEventListener('mouseleave', (function iife(currentJ) {
              return function() {
                eduResize(currentJ, this.id);
              };
            })(i)); // <-- here you pass j, which will become currentJ inside the iife


 }//end loop

Yasin Yaqoobi · Accepted Answer · 2016-08-03 19:31:41Z

-1

When you add an event listener javascript actually puts it on the the side and executes it after all your other code is executed at which point your j value would be increment to edus.length.

You need to create lexical scope by using a function like this.

(function(index){
    edu.addEventListener('mouseleave', function() {
    //this does call the eduResize function, and passes j and this.id
        eduResize(index,this.id);
})(j);

edited Aug 3, 2016 at 19:31

answered Aug 3, 2016 at 19:10

Yasin Yaqoobi

2,0683 gold badges31 silver badges39 bronze badges

4 Comments

user400654 Over a year ago

the event handler you used in your example isn't the one that is problematic.

user400654 Over a year ago

right... but in your example, the iife is irrelevant. you aren't even using index

mplungjan Over a year ago

The whole thing is an X/Y problem. Using jQuery correctly will solve the issue completely

Yasin Yaqoobi Over a year ago

Maybe.. The problem is half the people doesn't really understand javascript's scope including myself.

Collectives™ on Stack Overflow

javascript: addEventListener in loop not working. passing same parameter to function with each loop

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related