Estoy tratando de implementar una función onclick en un elemento html (que da como resultado la simulación de tirar un dado del 1 al 6) y descubrí una forma de hacerlo. Pero mientras intentaba llegar al trabajo, encontré un camino que simplemente no funciona y no puedo entender por qué.

Este enfoque está funcionando: solo llamo a los métodos dentro de eventListener y devuelve con éxito un número aleatorio entre 1 y 6 en la consola:

 const dice = document.querySelector('.btn--roll'); dice.addEventListener('click', function () { const number = Math.trunc(Math.random() * 6) + 1; console.log(number); return number; });

Pero simplemente no puedo entender por qué el segundo enfoque no funciona. Estoy definiendo una función de antemano y simplemente llamándola dentro de eventListener. Pero la consola no imprime nada cuando hago clic en el botón.

 function rollDice() { console.log(Math.trunc(Math.random() * 6) + 1); } const dice = document.querySelector('.btn--roll'); dice.addEventListener('click', rollDice());