Tengo un código donde paso una función como un 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 invocando inmediatamente la función?
function displayMessage(messageText) { const html = document.querySelector('html'); const panel = document.createElement('div'); panel.setAttribute('class','msgBox'); html.appendChild(panel); const msg = document.createElement('p'); msg.textContent = messageText; 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'); /* To avoid calling the function immediately, I do not use the function invocation * operator. This prevents me from passing parameters, however. */ btn.addEventListener('click', displayMessage);Ejecútelo como una devolución de llamada.
btn.addEventListener('click', () => displayMessage('text'));De esa manera, se ejecutará solo cuando se ejecute el evento de clic.