¿Como pasar un parámetro a un evento clic dentro de un ciclo for?

Question

Estoy tratando de crear un componente para la visualización de imágenes personalizado en material design lite basado en este archivo: icon-toggle.js

la idea que tengo es añadir la navegación como un subcomponente a traves de js.

Cada punto indicador de la navegación tiene un evento clic que llamará un método que recibirá la posición del punto. Sin embargo, el ciclo for donde asigno el evento me regresa esto, al ejecutar el comando gulp:

Functions declared within loops referencing an outer scoped variable may lead to confusing semantics.

La forma en que lo mando llamar es la siguiente:

dotsl = document.getElementsByClassName("dots")

for (var j = 0; j < dotsl.length; j++) {
            (function(dot, index) {
              dotsl[j].addEventListener('click', function(event) {
                console.log('hola mundo! ' + j );
              });
            })(dotsl[j], j);

   }

<div class="dots">a</div>
<div class="dots">b</div>
<div class="dots">c</div>
<div class="dots">d</div>

Deje los comentarios para mostrar todo lo que había intentado con anterioridad.

chequea [esta respuesta](https://es.stackoverflow.com/a/106067/28035) donde tiene un for con un setTimeOut es lo mismo que te esta pasando el alcance de las variables de JavaScript suele ser un dolor de cabeza — JackNavaRow, Dec 05 '18 at 18:46
lo del let ya lo habia intentado basandome en el edit 2 de esta respuesta [enlace](https://stackoverflow.com/questions/46027262/functions-declared-within-loops-referencing-an-outer-scoped-variable-may-lead-to) `respuesta`. tambien con un foreach pero con el gulp me mando un error referente a la funcion => pense que se debia a algo relacionado con el tipo de es5 o es6. — Daniel Esparza, Dec 05 '18 at 19:01
no entiendo porque haces algo como `(function(dot, index) { ` lo veo innecesario tu for debe quedar algfo asi : `for (let j = 0; j < dotsl.length; j++) { dotsl[j].addEventListener('click', function(event) { console.log('hola mundo! ' + j ); }); }` — JackNavaRow, Dec 05 '18 at 19:22

score 1 · Answer 1 · edited Dec 06 '18 at 12:44

Puedes sacarlo de la función anónima, a cómo lo tienes suele confundir al navegador con los parámetros y producir un error o warning, y lo de cambiar de var a let es cierto.

Me funcionó de esta manera

dotsl = document.getElementsByClassName("dots")

for (let j = 0; j < dotsl.length; j++) {
  dotsl[j].addEventListener('click', function(event) {
    console.log('hola mundo! ' + j );
  });
}

<div class="dots">a</div>
<div class="dots">b</div>
<div class="dots">c</div>
<div class="dots">d</div>

score 0 · Answer 2 · answered Dec 05 '18 at 19:38

Veo en tu codigo que dentro del for llamas un function(dot,index) y esta bien solo que el addEventListener debes añadirlo al dot que es el elemento y el index es el correlativo.

quedaria asi :

dotsl = document.getElementsByClassName("dots")

for (var j = 0; j < dotsl.length; j++) {
            (function(dot, index) {
              dot.addEventListener('click', function(event) {
                console.log('hola mundo! ' + index );
              });
            })(dotsl[j], j);

   }

<div class="dots">a</div>
<div class="dots">b</div>
<div class="dots">c</div>
<div class="dots">d</div>

Saludos.

score 0 · Answer 3 · answered Dec 05 '18 at 21:41

0

Lo solucione basándome en otro archivo de componente de material design lite:

/**
 * click
 */
CarbonSlider.prototype.handleForClick_ = function(index) {
  // console.log('hola mundo! ' + index);
  this.showSlides_(index);
};

y en el ciclo for:

dot.addEventListener('click', this.handleForClick_.bind(this, i));

answered Dec 05 '18 at 21:41

Daniel Esparza

21
4

Lo del identificador let no me funciono, el bind según entiendo sirve para para pasar la referencia de this al método, pero la razón por la que creo que funciona es por lo descrito en la sección var identificador del enlace: [enlace] (https://es.stackoverflow.com/questions/106042/var-let-const-o-nada-en-javascript ) – Daniel Esparza Dec 06 '18 at 15:16
en el último ejemplo. Lo que si no se es si el let no me funciono debido a que el gulp sea es5 y no lea es6 o el linter detecte algo mal con eso debido a que antes había tenido problemas con la función arrow. @JackNavaRow – Daniel Esparza Dec 06 '18 at 15:23
[el bind le da contexto al objeto this](https://es.stackoverflow.com/questions/135637/contexto-this-en-function-arrow-con-prototype) es casi equivalente al arrow function , tu funcion con el codigo que colocastes es un poco dificil de ayudar , de hecho , tu codigo de respuesta es distinta a la pregunta – JackNavaRow Dec 06 '18 at 15:28
@JackNavaRow ¿Debería modificar el título?, ¿ser más descriptivo?, cuando pregunte no estaba seguro si era es5 o es6, pregunte por es5 porque en ese momento era lo al menos no me generaba errores, ¿agregar la limitante de que había duplicado el proyecto de MDL?. La marque como duplicada, porque la información del enlace si me ayudo, pero añadí mi respuesta de como específicamente me había ayudado a mí o ¿debería modificar el formato de la respuesta? – Daniel Esparza Dec 06 '18 at 15:51
ya no importa, fue marcada como duplicada, lo importante es que pudiste resolver tu problema y aprendistes otras cosas – JackNavaRow Dec 06 '18 at 15:53

¿Como pasar un parámetro a un evento clic dentro de un ciclo for?

3 Answers3