Javascript - Passing a function as an argument

Question

Apologies, I could not find a solution that worked, despite similar questions being asked and answered.

I have a modal which is opened with openModal() which has a close button in the top-right corner. When I click close, I'd like a function to run depending on the argument which has been passed.

function openModal(onclose){
    //insert modal
    var modal = document.createElement('div');
    body.appendChild(modal);

    //insert close button
    var modalClose = document.createElement('span');
    modalClose.innerHTML = 'Χ'
    modalClose.classList.add('modalClose');
    modal.appendChild(modalClose);

    //call default function on click of close button
    modalClose.addEventListener("click", closeModal);


    //call custom function on click of close button
    if(beforeclose !== undefined){
        modalClose.addEventListener("click", onclose);
}

I would then call something like openModal('refreshPage()') where refreshPage would only run on the click of the close button.

Thanks for any help you can offer me - i should say I have tried to use eval in the addeventlistener and it just ran it immediately and then also when the button was clicked.

Answer 1

Do element.addEventListener(onclose, function(){ closeModal(refreshPage); }); .

Then you can design your closeModal function like this:

function closeModal(func){
   func();
}

References to functions are in the form of variables without the () :

• function foo() is referenced via foo
• function getData() is referenced via getData
• function bar(); const barr = bar function bar(); const barr = bar is referenced via bar or barr