entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Registro másivo de un manejadore de evento onclick en JavaScript

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é?

3 Respuestas

0voto

Peter Puntos150480

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.

3votos

alv-c Puntos1200

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(...)

0voto

diego_romero comentado

Funciona! buena idea.

0voto

jaime_pastor comentado

Esa es una posibilidad, pero estás modificando el objeto añadiendo una propiedad nueva o existente. Es mejor lo que comenta Peter, usar closures para ello (puedes cambiar el valor de identro de la closure).

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

0voto

daniel_garcia Puntos1440

Prueba con usar for ... in

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

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta