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.
generador.addEventListener("click",prueba);