• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

255
Vistas
Elementos de entrada que tienen el mismo valor con el bucle 'for'

Acabo de experimentar con JavaScript y estaba probando este código.

 var elements = document.getElementsByTagName("p"); var n = elements.length; // Should be: 10 for (var i = 0; i < n; i++) { elements[i].onclick = function () { console.log("This is element #" + i); }; }
 <p>Element: #1</p> <p>Element: #2</p> <p>Element: #3</p> <p>Element: #4</p> <p>Element: #5</p>

Sin embargo, cuando se ejecuta el código, ocurre algo extraño. Básicamente, por ejemplo, si hace clic en el elemento #1, dirá que ha hecho clic en el elemento #5.


Esto es lo que tengo curiosidad por saber:

  1. ¿Por qué ocurre esto?
  2. ¿Hay una solución para esto?
about 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

cambio de var para dejar:

 for (let i = 0; i < n; i++) { elements[i].onclick = function () { console.log("This is element #" + i); }; }
about 3 years ago · Juan Pablo Isaza Denunciar

0

Puede utilizar el siguiente código para corregir los problemas.

 var elements = document.getElementsByTagName("p"); var n = elements.length; function makeHandler(num) { return function() { console.log("This is element #" + num); }; }; for (var i = 0; i < n; i++) { elements[i].onclick = makeHandler(i + 1); }

Expliquemos el código.


Básicamente, en este código, makeHandler se ejecuta inmediatamente cada vez que pasamos por el ciclo, cada vez que recibe el valor actual de i + 1 y lo vincula a una variable num con ámbito.

La función externa ( makeHandler ) devuelve la función interna (función anónima) (que también usa esta variable num con ámbito) y el onclick del elemento se establece en esa función interna.

Esto asegura que cada onclick reciba y use el valor i adecuado (por la variable num de alcance).

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda