将 Function 作为 Javascript 中的参数传递 - 不工作

Question

I have run into a problem on my project for a popup that I am building. The goal is to create a function that will trigger an html popup. This Javascript function takes 5 arguments: Text, Button 1 text, Button 2 text, Button 1 action, and Button 2 action. For the button actions, I want to pass functions for arguments although for the life of me, I can't figure out why it it no working. Here is all the code.

Index.html

<div class="overlay" id = "popup2" style = "display: none;">
    <div class = "popup">
        <div id = "popup_text_box">
            <h id = "popup_text2"></h>
        </div><br><br>
        <div class = "btn" id = "popup_btn1" style="background-color:#D90505;"></div><br><br>
        <div class = "btn" id = "popup_btn2" style="background-color:#BD51FF;" ></div><br><br>
    </div>
</div>

Play.js

function popUp2(text, btn1, btn2, action1, action2){
        document.getElementById("popup2").style.display = "block";
        document.getElementById("popup_text2").innerHTML = text;
        document.getElementById("popup_btn1").innerHTML = btn1;    
        document.getElementById("popup_btn2").innerHTML = btn2;  
        document.getElementById("popup_btn1").onclick = action1();    
        document.getElementById("popup_btn2").onclick = action2();    
}

popUp2("You have been invited to join this club", "Accept", "Decline", joinClub, closePopUp);

The arguments, joinClub, and closePopUp, are actually arguments. But unfortunately, they are not working whatsoever. Also, I removed the functions and the popup worked fine, so I know that the problem lies with the functions being passed as arguments. Any solution would be amazing because this small glitch is hindering me from completing my project. Thank you!

Answer 1

Remove the () from action1 and action2 in your function. You want to assign the click handler the function reference, not the return value of the function.

Here's a working example:

 function popUp2(text, btn1, btn2, action1, action2) { document.getElementById("popup2").style.display = "block"; document.getElementById("popup_text2").innerHTML = text; document.getElementById("popup_btn1").innerHTML = btn1; document.getElementById("popup_btn2").innerHTML = btn2; document.getElementById("popup_btn1").onclick = action1; document.getElementById("popup_btn2").onclick = action2; } let joinClub = function() { console.log("joinClub called"); } let closePopUp = function() { console.log("closePopUp called"); } popUp2("You have been invited to join this club", "Accept", "Decline", joinClub, closePopUp);

 <div class="overlay" id="popup2" style="display: none;"> <div class="popup"> <div id="popup_text_box"> <h id="popup_text2"></h> </div><br><br> <div class="btn" id="popup_btn1" style="background-color:#D90505;"></div><br><br> <div class="btn" id="popup_btn2" style="background-color:#BD51FF;"></div><br><br> </div> </div>

Answer 2

function popUp2(text, btn1, btn2, action1, action2){
        document.getElementById("popup2").style.display = "block";
        document.getElementById("popup_text2").innerHTML = text;
        document.getElementById("popup_btn1").innerHTML = btn1;    
        document.getElementById("popup_btn2").innerHTML = btn2;  
        document.getElementById("popup_btn1").onclick = action1;    
        document.getElementById("popup_btn2").onclick = action2;    
}

Assigning onclick with action2() makes it run the function and closes the popup while assigning the popup buttons null because they are void functions.