Skip to main content
Publicación cerrada como "Duplicada" por fredyfx, gbianchi, JackNavaRow, ComunidadBot
arreglando enlace (enlace mal colocado) del archivo javascript
Origen Enlace

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

[https://github.com/google/material-design-lite/blob/mdl-1.x/src/icon-toggle/icon-toggle.js][1] 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.

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

[https://github.com/google/material-design-lite/blob/mdl-1.x/src/icon-toggle/icon-toggle.js][1]

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.

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.

se eliminaron 13 caracteres en el cuerpo; etiquetas editadas; título editado
Origen Enlace
JackNavaRow
  • 7.2k
  • 6
  • 25
  • 49
for (var j = 0; j < dotsl.length; j++) {
        (function(dot, index) {
          dotsl[j].addEventListener('click', function(event) {
            console.log('hola mundo! ');//Todo remplazar por un metodo que recibe el index
          });
        })(dotsl[j], j);

            //Comentarios
            // console.log('hola mundo! ' + dotsl[j]);
            // dotsl[j].addEventListener('click', function() {
            //   console.log('hola mundo! ');
            // });
            // (function(element, index) {
            //   element.addEventListener('click', function(event, element2, index2) {
            //     console.log('el index seleccionado es ' + index2);
            //   }.bind(null, null, element, index));
            // }).bind(null, dotsl[j], j);
            // dotsl[j].addEventListener('click', (function(event, context, slide) {
            //   console.log('el index seleccionado es ' + slide);
            // })(null, this, j));
          }

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>

for (var j = 0; j < dotsl.length; j++) {
        (function(dot, index) {
          dotsl[j].addEventListener('click', function(event) {
            console.log('hola mundo! ');//Todo remplazar por un metodo que recibe el index
          });
        })(dotsl[j], j);

            //Comentarios
            // console.log('hola mundo! ' + dotsl[j]);
            // dotsl[j].addEventListener('click', function() {
            //   console.log('hola mundo! ');
            // });
            // (function(element, index) {
            //   element.addEventListener('click', function(event, element2, index2) {
            //     console.log('el index seleccionado es ' + index2);
            //   }.bind(null, null, element, index));
            // }).bind(null, dotsl[j], j);
            // dotsl[j].addEventListener('click', (function(event, context, slide) {
            //   console.log('el index seleccionado es ' + slide);
            // })(null, this, j));
          }

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>

se eliminaron 13 caracteres en el cuerpo; etiquetas editadas; título editado
Origen Enlace
JackNavaRow
  • 7.2k
  • 6
  • 25
  • 49

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

Detalles:

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

[https://github.com/google/material-design-lite/blob/mdl-1.x/src/icon-toggle/icon-toggle.js][1]

la idea que tengo es añadir la navegación como un subcomponente a traveztraves 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:

for (var j = 0; j < dotsl.length; j++) {
        (function(dot, index) {
          dotsl[j].addEventListener('click', function(event) {
            console.log('hola mundo! ');//Todo remplazar por un metodo que recibe el index
          });
        })(dotsl[j], j);

            //Comentarios
            // console.log('hola mundo! ' + dotsl[j]);
            // dotsl[j].addEventListener('click', function() {
            //   console.log('hola mundo! ');
            // });
            // (function(element, index) {
            //   element.addEventListener('click', function(event, element2, index2) {
            //     console.log('el index seleccionado es ' + index2);
            //   }.bind(null, null, element, index));
            // }).bind(null, dotsl[j], j);
            // dotsl[j].addEventListener('click', (function(event, context, slide) {
            //   console.log('el index seleccionado es ' + slide);
            // })(null, this, j));
          }

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

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

Detalles:

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

[https://github.com/google/material-design-lite/blob/mdl-1.x/src/icon-toggle/icon-toggle.js][1]

la idea que tengo es añadir la navegación como un subcomponente a travez 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:

for (var j = 0; j < dotsl.length; j++) {
        (function(dot, index) {
          dotsl[j].addEventListener('click', function(event) {
            console.log('hola mundo! ');//Todo remplazar por un metodo que recibe el index
          });
        })(dotsl[j], j);

            //Comentarios
            // console.log('hola mundo! ' + dotsl[j]);
            // dotsl[j].addEventListener('click', function() {
            //   console.log('hola mundo! ');
            // });
            // (function(element, index) {
            //   element.addEventListener('click', function(event, element2, index2) {
            //     console.log('el index seleccionado es ' + index2);
            //   }.bind(null, null, element, index));
            // }).bind(null, dotsl[j], j);
            // dotsl[j].addEventListener('click', (function(event, context, slide) {
            //   console.log('el index seleccionado es ' + slide);
            // })(null, this, j));
          }

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

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

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

[https://github.com/google/material-design-lite/blob/mdl-1.x/src/icon-toggle/icon-toggle.js][1]

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:

for (var j = 0; j < dotsl.length; j++) {
        (function(dot, index) {
          dotsl[j].addEventListener('click', function(event) {
            console.log('hola mundo! ');//Todo remplazar por un metodo que recibe el index
          });
        })(dotsl[j], j);

            //Comentarios
            // console.log('hola mundo! ' + dotsl[j]);
            // dotsl[j].addEventListener('click', function() {
            //   console.log('hola mundo! ');
            // });
            // (function(element, index) {
            //   element.addEventListener('click', function(event, element2, index2) {
            //     console.log('el index seleccionado es ' + index2);
            //   }.bind(null, null, element, index));
            // }).bind(null, dotsl[j], j);
            // dotsl[j].addEventListener('click', (function(event, context, slide) {
            //   console.log('el index seleccionado es ' + slide);
            // })(null, this, j));
          }

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

Origen Enlace
Loading