Question

Tengo en mi página 10 elementos <div>, y el siguiente código que debería mostrar un número consecutivo asociado a cada div:

var divs = document.getElementByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].onclick = function() {
        alert('Div número: ' + i);
    }
}

El problema es que cuando doy clic en cualquiera de los divs el alert siempre muestra el mensaje: 'Div número: 10'. ¿Porqué?

Answer 1

Porque la función anónima crea un closure que incluye acceso a la variable externa i, por lo que su valor no se 'congela' y actúa como una variable global.

Answer 2

Al parecer toman el último valor de i .

Prueba con esto:

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].index = i;
    divs[i].onclick = function() {
        alert('Div número: ' + this.index);
    }
}

Creo que debería funcionar perfectamente.
Aunque yo prefiero divs[i].addEventListener('click', funct(...)

Answer 3

Prueba con usar for ... in

var divs = document.getElementByTagName('div');
for (x in divs) {
    divs[x].onclick = function() {
        alert('Div número: ' + x);
    }
}