Why is a function declared in document.ready() not defined when called?

Question

Here is my HTML/JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="/script/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            var $str = "hello world";

            function foo() {
                alert($str);
            }
        });
    </script>
</head>
<body>
    <form name="statusUpdateForm" method="post">
        <input type="button" name="submitButton" value=" " onclick="foo();" />
    </form>
</body>
</html>

When I click the button, I get a JavaScript error stating that foo is not defined. How can I call a JavaScript function declared inside document.ready()??

Related question here. http://stackoverflow.com/questions/1055767/why-can-i-not-define-functions-in-jquerys-document-ready — c4il, May 25 '11 at 19:28

score 7 · Accepted Answer · answered May 25 '11 at 19:13

You're placing the function's scope within another function, basically.

Picture this:

<script>
  document.onload = function(){
    function foo(){
      alert('bar');
    }
  };
  foo();
</script>

That is the facsimile of what you're trying to accomplish. Just like variables defined within a function are off limits outside of it, function names take on the same characteristics.

Side-Note JavaScript doesn't require $ prefix on variable names (though is acceptable as far as names are concerned). I didn't know if you're coming from PHP and are just accustomed or were aware.

Thought I'd make my comment an answer.

score 1 · Answer 2 · answered Jan 31 '13 at 08:03

1

Variables and methods declared inside the $(function() function are only accessible within that. If you need to use those outside, you you make it in the global namespace like

window.functionName = functionName;

answered Jan 31 '13 at 08:03

abhilashv

1,418
1
13
18

score 1 · Answer 3 · answered May 25 '11 at 20:23

1

Try this:

$(function() {
    window.foo = function () {
        alert('bar');
    }
});

Basically, you need to expose the function to global scope.

answered May 25 '11 at 20:23

digitalbath

7,008
2
17
15

score 0 · Answer 4 · answered May 25 '11 at 19:11

0

You can not, it is private to that scope.

answered May 25 '11 at 19:11

Milimetric

13,411
4
44
56

Can too, you just need to copy the function out of the scope. If you do something like this.foo = foo, or window['foo'] = foo, or something like that the code will work. And that's often what you want too. Though I'd recommend rather using `$('input[type=button]').click(foo);` inside the ready-function. – Alxandr May 25 '11 at 19:15
I agree with your recommendation, but my answer is still correct if you consider the question. You can expose things from inside private scope by pointing global scope variables at them, but you still can't access them. It wasn't a "sorry can't help you" answer, it was meant to educate on scope rules. – Milimetric May 25 '11 at 19:19

score 0 · Answer 5 · answered May 28 '11 at 03:15

0

What I ended up doing - what I should have done in the first place - is adding a click handler for the submit button:

$("input[name='submitButton']").click(function(){...});

answered May 28 '11 at 03:15

Eric Belair

10,574
13
75
116

Why is a function declared in document.ready() not defined when called?

5 Answers5

Linked

Related