JavaScript variable undefined on load;

Question

I can't get following problem. I define variables like this:

<script type="text/javascript">var myVar;</script>
<script type="text/javascript" src="/myScript.js"></script>

myScript.js looks something like this:

$(document).ready(function() {
  myVar = new myClass();
  myVar.init();
});

if I try to access the variable like this:

<div onclick="myVar.activate(x);">some content</div>

all is working fine, but if I do

<img src="path" onload="myVar.activate(x);"/>

I get an error "myVar is not defined". I don't get it.

<script type="text/javascript">var myVar;</script>
  some DOM Elements
<script type="text/javascript" src="/myScript.js"></script>
<script type="text/javascript">myVar.activate(x);</script>

Is not working either?!?!! Weird, isn't it?

*x is generated serverside *

Answer 1

$(document).ready(function(){
    // this function is executed after the entire document is ready,
    // and it will fire after window.onload
    myVar = new myClass();
    myVar.init();
});

Here you are trying to access a method of myVar, but your .ready() function hasn't fired yet so myVar has not been set to new myClass(). It is still an undefined variable

<script type="text/javascript">
    myVar.activate(x);
    // this script executes *before* the code inside your document ready function,
    // so this is *before* you have set myVar = new myClass();
    var_dump(myVar);
    // above should output 'undefined'
</script>

If you really need/want to call this method in an onload attribute, then you should set myVar to new myClass() in your inline script, like this:

<script type="text/javascript">
    var myVar = new myClass();
    myVar.init();
    myVar.activate(x);
</script>

Answer 2

If it's absolutely necessary that your code to assign a value to myVar happen in the doc ready, a better way to handle this would be something like this:

$(document).ready(function() {
    myVar = new myClass();
    myVar.init();

    $("#idOfMyImage").load(function() { myVar.activate(x); });
});

What happens here is that you are attaching the load handler only after the dom ready event is fired and myVar has a value assigned to it. If the image has already loaded by the time the doc ready fires, then this will execute immediately, it it hasn't, it will fire when the image loads. Now you've removed the race condition where you code depended on the order those two events would fire in (your original code might have worked if the server delivering the image was slow enough providing the data - what is probably happening is that the image you are loading is cached by your browser).

As a bonus, you've now got rid of the inline event handler which make a better separation of your HTML from your Javascript.

Answer 3

There is nothing scary here, you just doesn't declare the variable at a good time. When using online script, variable must be assigned before the browser read the DOM node.

In your code, you assign myVar on DOM ready, hence the browser already finished reading the DOM and throw an error.

My question now is why do you need to wait the DOM to be ready before creating an object? There sure have a work around.

Answer 4

The following function is executed when your HTML is completely rendered

$(document).ready(function() {
  myVar = new myClass();
  myVar.init();
});

And the following is rendered as soon as it's downloaded and added in the HTML by the browser:

<img src="path" onload="myVar.activate(x);"/>

So myVar cannot be defined, because when <img> is rendered by the page, ready() has not been called yet. Same reason for your second example. myVar is null

You should remove:

$(document).ready(function() ...

And try again.

Answer 5

why not simply, depending on what x is and where it's declared, obviously:

$(document).ready(function() {
  myVar = new myClass();
  myVar.init();
  myVar.activate(x);
});

the nett result should be the same without the error

Answer 6

Thanks to Billy Mathews, i do know why it is not working. Thank you very much!

This is now how i did it (not clean, but working!)

<script type="text/javascript" src="/myScript.js"></script>

myScript.js looks something like this:

$(document).ready(function() {
 var ServerGeneratedValue = $('myID').html();

 var myVar = new myClass();
 myVar.init();

 myVar.activate($ServerGeneratedValue);
});

Thank you very much to all answers!