CODEWITHSUNDEEP
javascriptscope
user4815162342
user4815162342

Reputation: 1688

Javascript function scope and calling from onclick

With JavasScript, say there is an innerFunction() defined within an outerFunction(). If you attempt to call the innerFunction(), outside of the outerFunction(), there will be an error as it is not defined within the scope.
However, if while in the outerFunction(), you assign the innerFunction() to an event, say a click event, for some outside element, like a button, then the innerFunction() can be called from that scope of the button, whatever it may be. So why are you able to make this second call to innerFunction() froma different scope.

I have a working example: http://jsfiddle.net/rcmoore38/gPrMk/

The initial changeColor() call does not work, but when changeColor() is assigned to the button, it can be called via the button.

Thank you!

Upvotes: 4

Views: 8034

Answers (1)

bfavaretto
bfavaretto

Reputation: 71918

There is no "scope of the button". What happens is that you're assigning the event listener from a scope where the inner function is visible, and that's all that matters in JavaScript. Scope in JS is about where functions are declared.

In your example:

$("#b").click(function() { changeColor() });

the function changeColor is available via closure inside the anonymous function, because it's declared in an outer scope. When you define a nested function, all variables and functions from the parent functions will be available inside it. So when the element is clicked and the anonymous function is called, it still has a reference to changeColor, and is able to call it.

You could also set the event handler without using a closure, like this:

$("#b").click(changeColor);

As I said, the important thing is that changeColor is in scope when you reference it (not when it's actually called, in this case, by the browser).

Upvotes: 2

Related Questions