Assigning onmouse events with a loop to a div array - Javascript

Question

I'm trying to assign onmouseover - onmouseout events to an array of divs with a loop.

I created the divs through a loop as well using a function parameter createDivs(x), x being number of divs and a bunch of this.property to assign styles.

Everything is working as expected, but assigning the mouse events through a loop with the divArray.Length object.

The script is the following:

Making the divs:

containers : {

    create : function(containerCount){
        var cArray = [this.c1Color,this.c2Color,this.c3Color];
        var aCounter = 0;
        divArray = [];
        for (var i = 1; i <= containerCount; i++){
            var c = document.createElement("div");
            c.id = ("container"+i);
            c.style.width = "100%";
            c.style.height = (this.height) + "px";
            c.style.backgroundColor = (cArray[aCounter]);
            aCounter++;
            document.body.appendChild(c);
            divArray.push(c);

            }

        }

},

Assigning the Events:

events : {

    on : function () {

        var z = 1;

        for (var i = 0; i < divArray.length; i++){

            var cont = ("container" + z);

            document.getElementById(divArray[i].id).onmouseover = function(){
                gala.animate.openAnimation(cont);
            }

            document.getElementById(divArray[i].id).onmouseout = function(){
                gala.animate.shrinkAnimation(cont);
            }

            console.log(cont);
            z++;

        }

    }

The console show the array sort through the number of divs as expected, and the cont variable ++ increase to assign the id. However at the end, the event listeners are only applied to the last element of the array.

Btw the cont variable is just a placeholder for a parameter that passes too the animation method so it knows what div to animate, meaning animat.openAnimation(cont) cont = div name.

Do a search for "JavaScript assigning handlers in a loop" or something similar. This question gets asked a lot. — cookie monster, Mar 31 '14 at 07:13
possible duplicate of [Javascript: generate dynamically handler](http://stackoverflow.com/questions/16794707/javascript-generate-dynamically-handler) — cookie monster, Mar 31 '14 at 07:17

score 1 · Accepted Answer · answered Mar 31 '14 at 07:14

Looks like you need a new scope to keep the value of the cont variable constant inside the event handlers. I replaced the cont variable as it didn't really seem neccessary

events : {

    on : function () {

        for (var j = 0; j < divArray.length; j++){

            (function(i) {

                divArray[i].onmouseover = function(){
                    gala.animate.openAnimation("container" + (i+1));
                }

                divArray[i].onmouseout = function(){
                    gala.animate.shrinkAnimation("container" + (i+1));
                }

            })(j);

        }

    }

Assigning onmouse events with a loop to a div array - Javascript

1 Answers1