How to call a dynamically called method in Javascript?

Question

I am working on the dynamic creation of Javascript, which will be inserted into the web page as it is created.

Javascript will be used to populate the list based on a choice in another list. When the selection of one list is changed, it is called by the method name based on the selected list value.

For example:

Listbox1 contains:

Image Colors Shapes

If Colors is selected, it will call the populate_Colours method, which populates another list.
To clarify my question: how do I make this call "populate_Colours" in Javascript?

Answer 1

Assuming the populate_Colours method is in the global namespace, you can use the following code, which uses both properties of the object, which can be accessed as if the object was an associative array and that all global objects are actually host window object properties .

 var method_name = "Colours"; var method_prefix = "populate_"; // Call function: window[method_prefix + method_name](arg1, arg2); 

Answer 2

As Triptych points out, you can call any global scope function by finding it in the contents of the host object.

A cleaner method that significantly pollutes the global namespace is to explicitly put functions into an array directly like this:

 var dyn_functions = []; dyn_functions['populate_Colours'] = function (arg1, arg2) { // function body }; dyn_functions['populate_Shapes'] = function (arg1, arg2) { // function body }; // calling one of the functions var result = dyn_functions['populate_Shapes'](1, 2); // this works as well due to the similarity between arrays and objects var result2 = dyn_functions.populate_Shapes(1, 2); 

This array can also be a property of some object other than the global host object, which also means that you can effectively create your own namespace like many JS libraries such as jQuery do. This is useful for reducing conflicts if, when you enable several separate utility libraries on one page and (in other parts of your resolution), you can simplify the reuse of code on other pages.

You can also use an object that you can find cleaner:

 var dyn_functions = {}; dyn_functions.populate_Colours = function (arg1, arg2) { // function body }; dyn_functions['populate_Shapes'] = function (arg1, arg2) { // function body }; // calling one of the functions var result = dyn_functions.populate_Shapes(1, 2); // this works as well due to the similarity between arrays and objects var result2 = dyn_functions['populate_Shapes'](1, 2); 

Please note that using an array or an object, you can use any method of installation or access to functions and, of course, store other objects there. You can also reduce the syntax of any of the methods for contant that is not syntactic using JS letter notation as follows:

 var dyn_functions = { populate_Colours:function (arg1, arg2) { // function body }; , populate_Shapes:function (arg1, arg2) { // function body }; }; 

Editing: of course, for larger blocks of functionality, you can expand it above to the very common “module template”, which is a popular way to encapsulate code functions in an organized way.

Answer 3

I would recommend NOT using global / window / eval for this purpose.
Instead, do it like this:

define all methods as Handler properties:

 var Handler={}; Handler.application_run = function (name) { console.log(name) } 

Now call it that

 var somefunc = "application_run"; Handler[somefunc]('jerry'); 

Exit: Jerry

Answer 4

you can do it like this:

 function MyClass() { this.abc = function() { alert("abc"); } } var myObject = new MyClass(); myObject["abc"](); 

Answer 5

Hi try this

  var callback_function = new Function(functionName); callback_function(); 

it will process the parameters themselves.

Answer 6

for a simple javascript function, we can use -

 var function_name='additionFunction'; var argMap={"name":"yogesh"}; var argArray=[{"name":"yogesh"}]; window[function_name](argMap); 

or

 window[function_name](argArray); 

or

 window[function_name](argMap,argArray); 

provided that the so-called function exists and has such parameters in a real implementation.

Answer 7

In ServiceWorker or Worker replace window with self :

 self[method_prefix + method_name](arg1, arg2); 

Workers do not have access to the DOM, so window is an invalid reference. The equivalent global scope identifier for this purpose is self .

Answer 8

Here is a working and simple solution for checking the existence of a function and sorting that dynamically functions using another function;

Start function

 function runDynmicFunction(functionname){ if (typeof window[functionname] == "function" ) { //check availability window[functionname]("this is from the function it "); //run function and pass a parameter to it } } 

and now you can generate the function dynamically, possibly using PHP like this

 function runThis_func(my_Parameter){ alert(my_Parameter +" triggerd"); } 

you can now call a function using a dynamically generated event

 <?php $name_frm_somware ="runThis_func"; echo "<input type='button' value='Button' onclick='runDynmicFunction(\"".$name_frm_somware."\");'>"; ?> 

The exact HTML you need

 <input type="button" value="Button" onclick="runDynmicFunction('runThis_func');"> 

Answer 9

Try the following:

 var fn_name = "Colours", fn = eval("populate_"+fn_name); fn(args1,argsN);