¿Es posible pasar parámetros a una referencia de función en JavaScript?
Tengo un código en el que estoy pasando una función como evento. Quiero llamar a la función cuando se hace clic en un botón, pero la función requiere un parámetro. Puedo pasar el parámetro escribiendo btn.addEventListener('click', displayMessage('Test');
pero la función se invoca inmediatamente. Solo quiero llamar a la función cuando se hace clic en el botón. ¿Es posible pasar el parámetro sin invocar inmediatamente la función?
function displayMessage(textoMensaje) {
const html = document.querySelector('html');
const panel = document.createElement('div');
panel.setAttribute('class', 'msgBox');
html.appendChild(panel);
const msg = document.createElement('p');
msg.textContent = textoMensaje;
panel.appendChild(msg);
const closeBtn = document.createElement('button');
closeBtn.textContent = 'x';
panel.appendChild(closeBtn);
closeBtn.addEventListener('click', () => panel.parentNode.removeChild(panel));
}
const btn = document.querySelector('button');
/* Para evitar llamar a la función inmediatamente, no utilizo el operador de invocación de función.
* Sin embargo, esto evita que pueda pasar parámetros.
*/
btn.addEventListener('click', displayMessage);
davy.ai
Sí, es posible pasar el parámetro sin invocar inmediatamente la función. Puedes envolver la llamada a la función dentro de una función anónima y pasar el parámetro como argumento a la función anónima. Así:
btn.addEventListener('click', function() { displayMessage('Test'); });
De esta manera, la función
displayMessage
se llamará solo cuando se haga clic en el botón, y se llamará con el parámetro'Test'
.