1

halo bueno les cuento lo siguiente estoy practicando javascript y tengo un problema , tengo un boton que al presionarlo debería enviar un mensaje por consola pero el mensaje se llama sin que yo le de click al boton por que ?

    let generador = document.getElementById("Generar");
function prueba(){
    console.log("esta es una prueba");
}
generador.addEventListener("click",prueba());
6
  • 2
    Intenta solo dejando prueba sin parentesis: generador.addEventListener("click",prueba); Commented el 16 jun. 2020 a las 21:13
  • Agrega tu HTML por favor
    – user128299
    Commented el 16 jun. 2020 a las 21:14
  • Como dice @JhoubertRincon, debes quitar los paréntesis al método que pasas como argumento. Saludos Commented el 16 jun. 2020 a las 21:23
  • gracias pero tengo un drama que pasa si la función necesita unos parámetros?? Commented el 16 jun. 2020 a las 21:55
  • En ese caso debes ejecutar una funcion anonima, Commented el 16 jun. 2020 a las 22:20

2 respuestas 2

2

La documentación de MDN es muy clara:

Si quieres pasar parámetros a la función del listener, debes utilizar funciones anónimas.

En este caso, la función anónima consistiría en esto: function() { prueba(param1, param3, paramN) } y sería pasada como segundo parámetro a addEventListener.

Veamos un ejemplo sencillo:

let generador = document.getElementById("Generar");

function prueba(oneParam) {
  console.log(`esta es una prueba del parámetro ${oneParam}`);
}

generador.addEventListener("click", function() {
  prueba(this.value)
}, false);
<button id="Generar" value="btnTest">Generar</button>

1

let generador = document.getElementById("Generar");

let valor1, valor2, valor3 = 0;

function prueba(parametro1, parametro2, parametro3){
    console.log(
      `
      Estos son los parametros pasados a prueba:
      Parametro1: ${parametro1},
      Parametro2: ${parametro2},
      Parametro3: ${parametro3}
      `
    );
}

generador.addEventListener("click", ()=> {
  valor1 = Math.floor(Math.random() * 1024) + 1;
  valor2 = Math.floor(Math.random() * 2048) + 1;
  valor3 = Math.floor(Math.random() * 4096) + 1;
  
  prueba(valor1, valor2, valor3);
});
<button id = "Generar">generar!</button>

Tenias solo un problema, y es que a addEventListener NO se le pasa la ejecucion de una función, si no un callback, es decir una funcion que se encarga de ejecutar otra funcion y no diractamente la ejecucion de la funcion prueba.

Es por eso que esto:

generador.addEventListener("click",prueba());

falla.

Aun asi, quice extender tu codigo para mostrarte como podrias mas o menos pasarle parametros a una funcion tomada por un addEventListener.

Nota: No se le puede pasar parametros a una funcion que fue añadida como EventListener por medio de addEventListener.

Pero hay una forma indirecta de hacerlo, y es hacer que el addEventListener de ese elemento HTML este ligado a una funcion anonima, la cual no es mas que una funcion que NO tiene nombre.

El proposito de ligar el addEventListener directamente con la funcion anonima y no con la funcion prueba, es porque podemos hacer que la funcion anonima sea la que se encargue de ejecutar nuestra funcion principal (prueba) mediante addEventListener, de esta manera no le estamos pasando directamente parametros a prueba, si no que mas bien nuestra funcion anonima simula el comportamiento de lo que seria lo mas parecido a pasarle parametros a una funcion que esta en un addEventListener.

Por cierto, tal vez no conozcas esta sintaxis:

()=>{

}

Eso de ahi tambien es una funcion, pero una funcion diferente, se llaman funciones flecha o arrow functions, fueron introducidas en ES6 y acortan muchisimo y a vecez hasta simplifican el cuerpo de una funcion, hay que tener en cuenta que NO son exactamente lo mismo, tienen sus diferencias y formas de uso.

Pero ahi ya nos estariamos desviando un poco del tema, si enrealidad deseas consultar mejor acerca de las arrow functions en los comentarios dejare un enlace que las describe muy bien por si te interesa.

Ah, una cosa mas, esto de aqui:

`
  Estos son los parametros pasados a prueba:
  Parametro1: ${parametro1},
  Parametro2: ${parametro2},
  Parametro3: ${parametro3}
`

Se llaman template strings, notese que las comillas usadas son diferentes, ese tipo de comillas (``) se llaman backticks y solo con ellas te servira aquello que se hace en el codigo (interpolacion), donde la interpolacion es el resultado de renderizar codigo javascript dentro de una cadena de texto directamente.

Para hacerlo deberas incluir tu codigo javascript o tus variables dentro de: ${}, de esta manera el string al ser imprimido guardara los valores renderizados.

3
  • 1
    la definicion de callback es una funcion que ejecuta otra funcion, dejar la funcion por fuera seria lo mismo que pasarle un callback segun esa definicion (la primera funcion al ser pasada como tu dices se encarga de ejecutar la segunda). es.wikipedia.org/wiki/Callback_(inform%C3%A1tica)
    – Layer
    Commented el 16 jun. 2020 a las 22:24
  • Gracias por el aporte BetaM, me gusta tomar en cuenta sugerencias para poder mejorar mi respuesta, entiendo tu observacion, podrias decirme especificamente por ejemplo que podria mejorarse en mi respuesta para yo poder asi hacer los cambios?, es bueno para ir mejorando tanto nostros como el OP, gracias por corregirme, o hacerme la observacion, lo agradezco.
    – Layer
    Commented el 16 jun. 2020 a las 22:29
  • @juan agustin aqui se encuentra informacion relacionada acerca de las arrow functions o funciones flecha por si te interesa es.stackoverflow.com/questions/363155/….
    – Layer
    Commented el 16 jun. 2020 a las 22:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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