0

Tengo una función en javascript tal que así:

 <script type="text/javascript">
   var lista = window.opener.document.getElementsByTagName("*");
   for (var i = 0; i < lista.length; i++) {
     lista[i].addEventListener ("click", function(){
     console.log ("Pulsó el control #" + i + ": " + this.nodeName + " /" + this.tagName);
    }
  );
 }
</script>

Esta función está en una ventana que recorre todos los elementos de su ventana padre para añadirles una acción de forma dinámica. En este caso, mediante el evento click sobre los elementos quiero que me salga por consola un mensaje que diga

"Pulsé el control #" + número del elemento en la lista + etc.

El mensaje que obtengo, sin embargo, es siempre con el mismo número "i" (en mi caso el 45). Esta es la salida de la consola:

Pulsó el control #45: TD /TD  fowl:34
Pulsó el control #45: TR /TR  fowl:34
Pulsó el control #45: TBODY /TBODY  fowl:34
Pulsó el control #45: TABLE /TABLE  fowl:34
Pulsó el control #45: CENTER /CENTER  fowl:34
Pulsó el control #45: BODY /BODY  fowl:34
Pulsó el control #45: HTML /HTML

Si dentro de la función paso como parámetro la "i" (lista[i].addEventListener ("click", function(i) ), obtengo la siguiente salida:

Pulsó el control #[object MouseEvent]: CENTER /CENTER  fowl:34
Pulsó el control #[object MouseEvent]: BODY /BODY  fowl:34
Pulsó el control #[object MouseEvent]: HTML /HTML  fowl:34
Pulsó el control #[object MouseEvent]: BODY /BODY  fowl:34
Pulsó el control #[object MouseEvent]: HTML /HTML

1) ¿Qué estoy haciendo mal? ¿Por qué si no paso parámetros en la función la variable "i" siempre vale 45 que es el número de elementos en la página padre, y si paso la "i" como parámetro en la función aparece "MouseEvent"?

2) ¿Cómo recorro bien el bucle para que cada elemento tenga su propio valor de índice del bucle?

0

2 respuestas 2

1

¿Por qué si no paso parámetros en la función la variable "i" siempre vale 45 ?

Porque si las variables pasadas o utilizadas se modificará su valor será siempre el último, si retorna 45, casi seguro que hay esa cantidad de elementos con dicho tag. Ejemplo

var id =2;
document.getElementById('micaja').addEventListener("click",function(){
  console.log(id);
});
var id =4;
<div id="micaja" style="background:#ccc;width:100px;height:20px">Opción</div>

Y si paso la "i" como parámetro en la función aparece "MouseEvent"

El segundo parámetro que se le pasa a la función addEventListener es un Listener , si a esta función se le pasa un parámetro incorrectamente como i la tomará como un tipo de evento como lo especifica Aqui

¿Cómo recorro bien el bucle para que cada elemento tenga su propio valor de índice del bucle?

Primero hay que tener en cuenta que una función anónima puede tomar la siguiente forma , con los () al final podemos pasar los parámetros a la función que se ejecutará.

(function (uno, dos) {
  console.log(uno+dos);
}(1, 2));

Teniendo esto en cuenta una opción para pasar el indice del for (puede haber más sencillas), sería :

var items  = document.getElementsByClassName('caja');
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener("click",function(idrecibido)
	{
	  return function() { console.log(idrecibido); }
	}(i),false);/* Ejecutar la Función enviando el parametro i */
}
.caja{
  width:100px;
  height:30px;
  background:#c33;
  margin:5px;
}
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

2
  • perfecto, muchas gracias por la aclaración!
    – Luis
    el 6 jun. 2017 a las 15:22
  • @Luis si la respuesta solucionó tu problema , no olvidar aceptar mi respuesta . Saludos
    – Dev. Joel
    el 7 jun. 2017 a las 17:36
0

Te esta mostrando el ultimo valor de i, tenes que ir guardando en el nombre o crear un atributo a cada elemento y después obtenerlo.

Edito según tu comentario

 <script type="text/javascript">
      var lista = window.opener.document.getElementsByTagName("*");
        for (var i = 0; i < lista.length; i++) {
          lista[i].addEventListener ("click", function(){
            this.id=i;
            console.log ("Pulsó el control #" + this.id + ": " + this.nodeName + " /" + this.tagName);
            }
          );
        }
    </script>

No lo probé así que es probable que te todos los id's sean 45, lo escribo para darte una guía de lo que tienes que hacer.

2
  • 2
    Hola Nicolás, gracias por tu respuesta. ¿Podrías desarrollarla un poco más? Tal vez mostrando una alternativa para lograr su objetivo... no sé.
    – toledano
    el 4 jun. 2017 a las 21:29
  • Hola Nicolás, el atributo id no me funcionó porque los elementos no poseen el mismo. Así que simplemente no aparece nada. Gracias de todas formas.
    – Luis
    el 6 jun. 2017 a las 15:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.