-1

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>
Community
  • 1
  • 1
Livi17
  • 1,620
  • 3
  • 25
  • 43
  • Need HTML, I'm not sure whether you have multiple elements involved or if you have just one. – zer00ne Aug 03 '16 at 18:55
  • Why mix jQuery and DOM? $(".eduEvent").hover.... – mplungjan Aug 03 '16 at 18:56
  • Use a common class man! No need to loop IDs. – tymeJV Aug 03 '16 at 18:56
  • 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 Aug 03 '16 at 18:58
  • I updated the question with the HTML. I have multiple elements involved. – Livi17 Aug 03 '16 at 18:59
  • 1
    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. – Kevin B Aug 03 '16 at 19:14
  • Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – nem035 Aug 03 '16 at 19:19
  • I do see where you tried to create a function that accepts the index, which is explained in the dupe, but you then waited to call it until later within the event callback, which isn't what the linked question is suggesting. – Kevin B Aug 03 '16 at 19:19
  • This is an X/Y problem. If jQuery's class selector is used with the proper hover or on("mouseenter"..., the problem goes away – mplungjan Aug 03 '16 at 19:28

2 Answers2

0

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
Livi17
  • 1,620
  • 3
  • 25
  • 43
-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);
Yasin Yaqoobi
  • 1,888
  • 3
  • 27
  • 38