Creating A Loop From A Series Of Onmouseover Events

How can I create a loop out of this function: window.onload = function makeHalo() { document.getElementById('d1').onmouseover = function() { this.id ='d1On'; th

Solution 1:

The primary technical issue you're facing is that you're creating closures in a loop. Each one of those callbacks closes over the samei variable, whose value will be the same for each of the callbacks (its value after the final iteration). This is fixed by wrapping the body of the loop in its own function that receives i as an argument, thus creating a local copy on each iteration.

There are a number of style and performance issues, as well:

• The bodies of those callbacks are in many cases exactly the same (the mouseover and mouseout pairs end up dong the same work in each block).
• You're retrieving the same elements by ID repeatedly. This is unnecessary; you should save a reference.
• You're identifying the state of an element by changing its ID. This isn't generally how you want to handle this. An ID shouldn't change.

I would write it more like this (addressing the closure issue and the first two bullet items above (not addressing the ID problem)):

for (var i = 1; i <= 2; i++) {
    (function(i) {
        var d = document.getElementById("d" + i);
        var menu = document.getElementById("menu" + i);
        d.onmouseover = menu.onmouseover = function() { 
            d.id = "d" + i + "On"; 
            d.className = "hover";
            menu.style.color = "#6DC5E6";
        };
        d.onmouseout = menu.onmouseout = function() { 
            d.id = "d" + i; 
            d.className = "";
            menu.style.color = "#FFFFFF";
        };
    })(i);
}

This handles just two elements; simply change the loop max to make it work for more.

You can see a working demo here:

• http://jsfiddle.net/ezYtq/

Solution 2:

Is your last div in your HTML "d43" or is it "d44"? Your loop will run through d1 through d43 because you have i<44 which means when i is 44 it will exit the loop so it will stop at d43.

If you want it to get to d44, then either change the condition to: i <= 44 or change it to i < 45

By the way is there is reason you are not using jQuery it's design to make things like this much easier, in several ways. Maybe you listed what you were actually trying to accomplish with this code for example whether it's a menu system or something we might be able to suggest better approaches.

Solution 3:

No need for JavaScript here... just use the CSS :hover pseudo-class.

But, to answer your question:

• Do not change the id of your element. This seems fundamentally wrong. Change, add, or remove a class instead. What are you trying to accomplish by changing the id?
• Don't keep track of id's, just keep track of element references directly.
• Most importantly, when you are doing your loop, by the time the functions are called, the value of i is 45, for all elements. Solve this by passing i to a function that creates your event handlers:

window.onload = functionmakeHalo() {  
    for (var i = 1; i < 44; i++) {
        (function (i) {
            var menu = document.getElementById("menu" + i);
            var d = document.getElementById("d" + i);
            functionover () {
                d.className = "hover";  
                menu.style.color = "#6DC5E6";  
            }
            d.onmouseover = over;
            menu.onmouseover = over;

            functionout () {  
                d.className = "";  
                menu.style.color = "#FFFFFF";  
            }
            d.onmouseout = out;
            menu.onmouseout = out;
        })(i);
    }  
}