2

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.

4
  • 1
    el problema es que debes cambiar la el for de var a let Commented el 5 dic. 2018 a las 18:45
  • chequea esta respuesta 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 Commented el 5 dic. 2018 a las 18:46
  • lo del let ya lo habia intentado basandome en el edit 2 de esta respuesta enlace 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. Commented el 5 dic. 2018 a las 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 ); }); } Commented el 5 dic. 2018 a las 19:22

3 respuestas 3

1

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>

0

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.

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));
5
  • 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] (es.stackoverflow.com/questions/106042/… ) Commented el 6 dic. 2018 a las 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 Commented el 6 dic. 2018 a las 15:23
  • el bind le da contexto al objeto this 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 Commented el 6 dic. 2018 a las 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? Commented el 6 dic. 2018 a las 15:51
  • ya no importa, fue marcada como duplicada, lo importante es que pudiste resolver tu problema y aprendistes otras cosas Commented el 6 dic. 2018 a las 15:53

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