14

While debugging, I always use Firebug and try to call functions and show variables. However I can't when the function or variable is defined within $(document).ready.

How can I access these variables? Can I type something like a namespace, like document.ready.variableName or how can I see this?

Thank you in advance.

Jasper
  • 75,717
  • 14
  • 151
  • 146
curly_brackets
  • 5,491
  • 15
  • 58
  • 102

7 Answers7

19

Global variables and functions can be created by assigning them as a property of window:

$(function(){
    window.foo = function foo() {
        // …
    }
});

foo() should be accessible anywhere after that handler is executed.

millimoose
  • 39,073
  • 9
  • 82
  • 134
2

How can I access these variables?

Well, you can't. Everything that you define inside an anonymous function such as what you are using in the $(document).ready is scoped to this anonymous function. It's private and not accessible to the outside.

So you could put your console.log inside the $(document).ready if you needed to inspect some private variable that is defined in its scope.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
2

That's what debugging is for. In all major browsers (including IE), you can set breakpoints in the javascript code. When this is done the script halts and you can inspect your variables.

Here some links:

Community
  • 1
  • 1
topek
  • 18,609
  • 3
  • 35
  • 43
  • To the one, who downvoted me. Please leave a comment with a reason. – topek Nov 15 '11 at 19:55
  • This didn't answer the question at least not directly. He wanted to know 1 - How to access variables that are declared inside the .ready() function and 2 - If not, how can he write his JavaScript so he can. These are links talking about debugging. Based on his question, he clearly knows the basics of JavaScript debugging. – arb Nov 15 '11 at 20:02
  • 1
    Correct me but I had the impression that @Kenneth B did not know how to debug with breakpoints. And sometimes it's better to offer an alternative to what the author is asking. I for my case do seldom set global variables to debug my javascript, but use extensively the debugger. This is in my opinion a far superior approach, because you can jump around in the call stack, and see, what the state in each stack is. – topek Nov 15 '11 at 20:12
  • @Zero21xxx: "Knows how to use Firebug as a DOM inspector / REPL" does not imply "knows about JS breakpoints". If in fact the OP does want to know how to inspect random local variables in his ready handler (which I'd argue is not a wrong way of interpreting the question), this answer suggests an entirely valid and useful approach. – millimoose Nov 15 '11 at 20:15
1

It depends on how you declare the variables inside the .ready() function. If you do var x = "test", then no, they are only accessible inside the scope of the ready function. If you do something like x="test", then that is available in the global scope and you can just access it like alert(x); or alert(window.x);

You probably don't want to define variables inside the ready function though if you are trying to use them outside the ready function.

arb
  • 7,753
  • 7
  • 31
  • 66
1

Declare the variable in global scope:

E.g.

<script type="text/javascript">
var globalVar = null;
$(document).ready(
function() {
     globalVar = "This is the value";
}
);

function TestFunc() {
    alert(globalVar);
}
</script>

Here, if you call the TestFunc() anytime after the page load, you will see the value assigned in the ready() function.

James Jithin
  • 10,183
  • 5
  • 36
  • 51
0

Not sure I fully understand the issue, but couldn't you just declare the variables outside of document ready?

var a = "bar";

$(document).ready(function(){
    a = "foo";
});

If you're using firebug, you should be able to call console.log within document ready, which might give you what you're looking for.

James Johnson
  • 45,496
  • 8
  • 73
  • 110
0

If you have

var x = "foo"
$(document).ready(function(){
  alert(x); // foo
});

You can see the x variable anywhere, but if you you declare a variable y into the document ready It'll be only accessible within the document ready:

var x = "foo"
$(document).ready(function(){
  alert(x); // foo
  var y = "bar"
  alert(y); // bar
});
alert(y); // undefined
Mr_Nizzle
  • 6,644
  • 12
  • 55
  • 85