Call a javascript function dynamically

Question

I have some functions defined inside a array like this.

checkInputType : function(sel){
 alert($(sel).prop('type'));
},
checkSelect : function(el){
 .......
},
.....

And I can call it like this options.checkInput($(this));. This is working.
Now I want to call any of those defined functions dynamically. So I have this array with the function names in it.

var elmType2Func = {'input' : 'checkInput', 'select' : 'checkSelect', 'textarea' : 'checkTextarea'};

Now looping through all elements inside a form I want to call the right function for each element(elmType2Func array with element as a key and function name as a value).

var element = $(this).prop('tagName').toLowerCase();

I cannot call like this - options.elmType2Func[element]($(this)); I know this is not the right way to call this function.
Can anybody help me with this.

Don't you just need to do options[elmType2Func[element]]($(this)); ? — Simon
– Simon, Commented Jan 31, 2014 at 8:52

Chris Moutray · Accepted Answer · 2014-01-31 09:02:06Z

3

You need to store functions, not their names:

var elmType2Func = {'input' : checkInput, 'select' : checkSelect, 'textarea' : checkTextarea};

http://jsfiddle.net/hmb25/

If the functions are already members of some object, like:

var options = {
     checkInput: function() {...},
     checkSelect: function() {...},
}

then you can keep strings in elmType2Func:

var elmType2Func = {'input' : 'checkInput', 'select' : 'checkSelect', 'textarea' : 'checkTextarea'};

and use double indirection to refer to them:

var tag = $(this).prop('tagName').toLowerCase();
var fun = options[elmType2Func[tag]];

gives you a reference to the function.

edited Jan 31, 2014 at 9:02

Chris Moutray

18.4k7 gold badges49 silver badges66 bronze badges

answered Jan 31, 2014 at 8:52

georg

216k57 gold badges324 silver badges401 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mithun Sen Over a year ago

yes. The functions are already members of options object. Thanks. working perfectly...

Chris Moutray · Accepted Answer · 2014-01-31 08:53:18Z

2

Rather than putting a string for the name put the function

var elmType2Func = {
    'input' : checkInput,
    'select' : checkSelect, 
    'textarea' : checkTextarea,
    'submit' : function (arg) { ... }
};

answered Jan 31, 2014 at 8:53

Chris Moutray

18.4k7 gold badges49 silver badges66 bronze badges

Comments

Bergi · Accepted Answer · 2014-01-31 08:53:37Z

2

options.elmType2Func[element]($(this));

That is accessing the property with the literal name elmType2Func on the object - you want to use bracket notation here as well:

options[elmType2Func[element]]($(this));

Alternatively, you might not use elmType2Func as a property name lookup table, but to look up the functions directly:

var elmType2Func = {
    'input' : options.checkInput,
    'select' : options.checkSelect, 
    'textarea' : options.checkTextarea
};
elmType2Func[element]($(this));

answered Jan 31, 2014 at 8:53

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Collectives™ on Stack Overflow

Call a javascript function dynamically

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related