elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Usando Git para manipular el directorio de trabajo, el índice y commits (segunda parte)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Forma correcta de hacer esto? No referencia en funcion en click.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Forma correcta de hacer esto? No referencia en funcion en click.  (Leído 696 veces)
@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
[Resuelto] Forma correcta de hacer esto? No referencia en funcion en click.
« en: 3 Febrero 2020, 03:34 am »

Al añadir listeners con una función que hace alert de i, se queda la referencia asignada al listener, es decir, cuando se presione el botón, se comprueba cual es el valor de i al presional el botón. Cual es la forma correcta de dejar una valor fijo incremental en cada botón? Es decir, que cuando presione el primer botón salga 1, cuando presione el segundo salga 2, etc.

Una forma corta y eficiente.

Código
  1. <!DOCTYPE html>
  2. <html>
  3. <input type="number" placeholder="input" id="inpcalc"></input>
  4. <button type="button" class="bcalc">7</button>
  5. <button type="button" class="bcalc">8</button>
  6. <button type="button" class="bcalc">9</button>
  7. <button type="button" class="bcalc">+</button>
  8. <button type="button" class="bcalc">4</button>
  9. <button type="button" class="bcalc">5</button>
  10.  
  11. <script>
  12. var botones = document.querySelectorAll(".bcalc");
  13. var input = document.querySelector("#inpcalc");
  14.  
  15. for(var i = 0; i < botones.length; ++i) {
  16. botones[i].addEventListener("click",  function(){alert("Boton Número " + i)});
  17. }
  18. </script>
  19. </body>
  20. </html>


« Última modificación: 26 Febrero 2020, 13:14 pm por #!drvy » En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.700



Ver Perfil WWW
Re: Forma correcta de hacer esto? No referencia en llamada de funcion en click.
« Respuesta #1 en: 22 Febrero 2020, 23:53 pm »

Hay una duda exactamente igual que la tuya en Stackoverflow de hace 10 años jaja.

https://stackoverflow.com/questions/2568966/how-do-i-pass-the-value-not-the-reference-of-a-js-variable-to-a-function

En resumidas cuentas, tienes que crear una variable cuyo scope sea solo el del bloque actual.

Código
  1. for (let i = 0; i < botones.length; ++i) {    
  2.    botones[i].addEventListener("click",  function(event) {
  3.     alert(i);
  4.    });
  5. }


https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Statements/let


Saludos


En línea

@XSStringManolo
<svg/onload=alert()>
Colaborador
***
Desconectado Desconectado

Mensajes: 2.279


Turn off the red ligth


Ver Perfil WWW
Re: Forma correcta de hacer esto? No referencia en llamada de funcion en click.
« Respuesta #2 en: 23 Febrero 2020, 00:38 am »

Hay una duda exactamente igual que la tuya en Stackoverflow de hace 10 años jaja.

https://stackoverflow.com/questions/2568966/how-do-i-pass-the-value-not-the-reference-of-a-js-variable-to-a-function

En resumidas cuentas, tienes que crear una variable cuyo scope sea solo el del bloque actual.

Código
  1. for (let i = 0; i < botones.length; ++i) {    
  2.    botones[i].addEventListener("click",  function(event) {
  3.     alert(i);
  4.    });
  5. }


https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Statements/let


Saludos
Ostras, mira que me comí la cabeza con esto!
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines