Question

I am trying to use anonymous function for adding handler to anchor objects.

I run this code but it doesn’t work can you explain why and try to fix it? Thanks:

var obj = document.getElementsByTagName("a");
var items = ["mouseover", "mouseout"];
for (var i = 0; i < items.length; i++) {
    (function() {
        var item = items[i];
        for (var i = 0; i < obj.length; i++) {
            obj[i]["on" + item] = function() {
                alert("thanks for your " + item);
            };      
        }
    })();               
}

Answer 1

i is “hoisted”; in other words, your function is being executed as:

var i;
var item; // vars are hoisted to the beginning

item = items[i];
for (i = 0; i < obj.length; i++) {
    obj[i]["on" + item] = function() {
       alert("thanks for your " + item);
    };      
}

So i in items[i] is not referring to the outer i. Instead, i is undefined. You should use separate variable names, e.g. j for the inner loop:

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

Second, item will change so the alert will use the same value each time. To circumvent this, you can use an anonymous function, but the point in them is to pass the value so that it “freezes”:

var obj = document.getElementsByTagName("a");
var items = ["mouseover", "mouseout"];
for (var i = 0; i < items.length; i++) {
    var item = items[i];

    (function(item) {
        for (var j = 0; j < obj.length; j++) {
            obj[j]["on" + item] = function() {
                alert("thanks for your " + item);
            };      
        }
    })(item);               
}