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 *

Thats wrong piece of code , calling on onload myVar.activate(x) , but that function is inside DOM on ready .. not possible — Dimag Kharab
– Dimag Kharab, Commented Feb 13, 2014 at 14:14
@Liam — It might. It might not. It depends on how quickly the image loads. — Quentin
– Quentin, Commented Feb 13, 2014 at 14:16
@Liam: That's not necessarily true. The onload will fire once the image has loaded which may or may not be before the DOM has finished loading. Either way, it's a horrible way to code. — Matt Burland
– Matt Burland, Commented Feb 13, 2014 at 14:16

Bill · Accepted Answer · 2014-02-13 14:25:02Z

2

$(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>

edited Feb 13, 2014 at 14:25

answered Feb 13, 2014 at 14:19

Bill

3,52725 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Viktor Over a year ago

Thanks for the hint with <script type="text/javascript">myVar.activate(x);</script>

Viktor Over a year ago

not yet. I have to find an another way to read serverside generated var x with jQuery

Bill Over a year ago

But that is a different question, right? I mean did this answer your question?

Matt Burland · Accepted Answer · 2014-02-13 14:28:41Z

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.

Karl-André Gagnon · Accepted Answer · 2014-02-13 14:16:41Z

0

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.

answered Feb 13, 2014 at 14:16

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

1 Comment

Quentin Over a year ago

There's no problem is the declaration of the variable (var myVar). The problem is the time it has a value assigned to it.

alexmngn · Accepted Answer · 2014-02-13 14:18:17Z

0

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.

answered Feb 13, 2014 at 14:18

alexmngn

9,71720 gold badges75 silver badges137 bronze badges

2 Comments

Viktor Over a year ago

I do need $(document).ready(function() in cause of some depencies to external loaded scripts

alexmngn Over a year ago

So you have to load/display your HTML after these external loaded scripts.

Liam · Accepted Answer · 2014-02-13 14:19:19Z

0

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

answered Feb 13, 2014 at 14:19

Liam

30k28 gold badges143 silver badges206 bronze badges

1 Comment

Viktor Over a year ago

x is generated by a serverside function

Viktor · Accepted Answer · 2014-02-13 14:45:44Z

0

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!

answered Feb 13, 2014 at 14:45

Viktor

6334 gold badges10 silver badges27 bronze badges

Collectives™ on Stack Overflow

JavaScript variable undefined on load;

6 Answers 6

3 Comments

Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related