如何调用在另一个函数中作为参数传递的函数

Question

how to call a function which is passed as parameter in another function

here the function i am calling onclick i paased the fucntion name as parameter

onclick="calldialogbox('thisisfortest')"

this is the function which is calling onclick

function calldialogbox(funtion_name){
    var dialog = $('<p>Are you sure?</p>').dialog({
        buttons: {
            "Yes": function(){
                dialog.dialog('close');
                funtion_name(); //here i am calling function
            },
            "Cancel":  function() {
                dialog.dialog('close');
            }
        }
    });
}

this is the function that is i want to call

function thisisfortest(){
    alert("thisisfortest");
}

Answer 1

Simply pass the function without quotes. This is called callback. In javascript functions are first class objects, so you can pass them around like normal variables.

PS. Try to use addEventListener instead of html onclick attribute.

Answer 2

In case of passing in a function name as parameter - use the following workaround(dealing with 'global' function):

...
"Yes": function(){
    dialog.dialog('close');
    window[funtion_name](); //here I'm calling function <----
},
...

Answer 3

Instead of thinking about function_name think about it as simply function intead - you're not passing in the name of the function as a string but an actual reference to the function itself.

onclick="calldialogbox(thisisfortest)"

You can do this because functions in JavaScript are "first class objects" and can be assigned to variables, passed in as parameters to other functions (aka callbacks), and returned from functions too.

In terms of JS best practice the best way to approach this is to separate out your inline JS using an event listener. Something like this:

HTML

<div id="clickable">Click me</div>

JS

var div = document.getElementById('clickable');
div.addEventListener('click', calldialogbox(thisisfortest), false);

That way you don't need the onclick event in the HTML.

DEMO

(Really, because calldialogbox isn't an async function, there's really no need to pass that callback in at all in this example.)

Answer 4

try this one.
in html

<a onclick="calldialogbox(thisisfortest)">Click Me</a>

js

function calldialogbox(funtion_name){
var dialog = $('<p>Are you sure?</p>').dialog({
    buttons: {
        "Yes": function(){
            dialog.dialog('close');
            funtion_name(); //here i am calling function
        },
        "Cancel":  function() {
            dialog.dialog('close');
        }
    }
});
}

function thisisfortest(){
alert("thisisfortest");
}