function names in variables

Question

I am having a problem when trying to call a function which has it's name stored in a variable. I have found some questions regarding my problem on stackOverflow but still, I can't seem to resolve my problem. From what i understood, using

window[functionName]();

should call the function I want. I created a jsfiddle that I hope will clarify my problem. The problem is, that instead of my function being called I get an error:

window[functionName] is not a function

I believe there is some small thing I am missing, but after a long time spent trying to figure out what the problem was, I decided to give it a try here too.

If you want to call it as a property of `window`, you first have to make your function a property of `window`. — Kevin B, Dec 17 '13 at 16:15
This is an issue with your fiddle. jsfiddle, by default, automatically wraps your code in a ready handler, so your functions aren't in the global scope. You can tell jsfiddle you don't want your code wrapped (in the upper left below where you select that you want jquery): http://jsfiddle.net/Cwhwx/ — Jason P, Dec 17 '13 at 16:16

score 6 · Accepted Answer · answered Dec 17 '13 at 16:16

Because your functions are added in a onload handler so they are local to the method not available in the gloabl scope.

Select no-wrap header/body in the second dropdown in the left panel, then add your jQuery handlers in a dom ready handler.

function one() {
    alert('one called');
}

function two() {
    alert('two called');
}

function three() {
    alert('three called');
}

jQuery(function () {
    jQuery("button").bind("click", function () {
        var funcName = "one";
        window[funcName]();
        //alert('here');
    });
})

Demo: Fiddle

jsfiddle adds the script in a window.onload = function(){} handler by default, so any function/variable you declare there will local to that function scope and will not be available in the global scope(window)

thanks for the answer, i will accept it as soon as I am allowed. One more question though. Is there any way to call the functions that have been created in the window.onload? — relysis, Dec 17 '13 at 16:24
thanks a lot for the really quick help! would have gave a +1 but my reputation doesn't allow me yet — relysis, Dec 17 '13 at 16:30

score 2 · Answer 2 · edited May 23 '17 at 12:33

2

WORKING JS FIDDLE

This syntax works just fine, (used code from your example fiddle). here I'm explicitly adding the function to the window object.

There is a ton of information regarding why this works On This Question and Arun P Johny's answer gives a decent explanation, but basically it boils down to expressing a function and declaring a function.

window.one = function() {
  alert('one called');
}

edited May 23 '17 at 12:33

Community

1
1

answered Dec 17 '13 at 16:16

Rooster

9,954
8
44
71

3

You should explain WHY the code works so the OP knows what to fix. – srquinn Dec 17 '13 at 16:17
@jibsales Sorry had to hop on an impromptu meeting right after I answered. But now that this has been answered more thoroughly, providing a link to an informative resource seems like it should suffice. – Rooster Dec 17 '13 at 18:06

score 0 · Answer 3 · answered Dec 17 '13 at 16:26

You have a problem with the way you were asigning the functions. You can do it this way:

I changed your code:

window.one = function(){
  alert('one called');
}
window.two = function() {
  alert('two called');
}
window.three = function() {
  alert('three called');
}

jQuery("button").on("click", function() {
  var funcName = window.prompt("What function to fire?","");
  window[funcName]();
});

and fixed the fiddle: http://jsfiddle.net/Nne6W/

function names in variables

3 Answers3