Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: @XSStringManolo en 3 Febrero 2020, 03:34 am


Título: [Resuelto] Forma correcta de hacer esto? No referencia en funcion en click.
Publicado por: @XSStringManolo 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>

Título: Re: Forma correcta de hacer esto? No referencia en llamada de funcion en click.
Publicado por: #!drvy 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

Título: Re: Forma correcta de hacer esto? No referencia en llamada de funcion en click.
Publicado por: @XSStringManolo en 23 Febrero 2020, 00:38 am
Cita de: #!drvy 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
Ostras, mira que me comí la cabeza con esto!


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