weird var problem

D

disappearedng

Hi everyone,
I have encountered a small problem concerning global variables:

var print = function(string){
var reference = document.getElementById("myDiv");
reference.innerHTML += string + "<br/>";
};

This doesn't:
REF = {
div1 : document.getElementById("myDiv")
};

var print = function(string){
REF.div1.innerHTML += string + "<br/>";
};

Firebug complains that REF.div1.innerHTML is null . Why?
 
G

Gregor Kofler

disappearedng meinte:
Hi everyone,
I have encountered a small problem concerning global variables:

var print = function(string){
var reference = document.getElementById("myDiv");
reference.innerHTML += string + "<br/>";
};

This doesn't:
REF = {
div1 : document.getElementById("myDiv")
};

var print = function(string){
REF.div1.innerHTML += string + "<br/>";
};

Firebug complains that REF.div1.innerHTML is null . Why?
Click to expand...

Does myDiv already exist, when REF is being defined? Your first example
needs the reference only upon being called (perhaps long after the
document has completed loading), the latter one when REF gets defined -
presumably somewhere in a script element.

Gregor
 
D

disappearedng

Wait
If I have an html
<html>
<head>
<script type="text/javascript">
.... DEFINITION of the javascript here ...
</script>
<body>
<div id="myDiv"/>
</body>
</html>

My question is:
1) Does Javascript gets loaded before the HTML?
2) If what you said is indeed true, myDiv not defined, then how come
when my calling of print inside the Javascipt definition area works
then? If myDiv is not defined upon compile time, then why will

var print = function(string){
var reference = document.getElementById
("myDiv");
reference.innerHTML += string + "<br/>";
};

this work since myDiv has not been created (or I misintreprid what you
said wrong)
 
D

disappearedng

Wait
If I have an html
<html>
<head>
<script type="text/javascript">
.... DEFINITION of the javascript here ...
</script>
<body>
<div id="myDiv"/>
</body>
</html>

My question is:
1) Does Javascript gets loaded before the HTML?
2) If what you said is indeed true, myDiv not defined, then how come
when my calling of print inside the Javascipt definition area works
then? If myDiv is not defined upon compile time, then why will

var print = function(string){
var reference = document.getElementById
("myDiv");
reference.innerHTML += string + "<br/>";
};

this work since myDiv has not been created (or I misintreprid what you
said wrong)
 
G

Gregor Kofler

disappearedng meinte:
Wait
If I have an html
<html>
<head>
<script type="text/javascript">
... DEFINITION of the javascript here ...
</script>
<body>
<div id="myDiv"/>
</body>
</html>

My question is:
1) Does Javascript gets loaded before the HTML?
Click to expand...

Loaded? No. Or did you mean parsed? Since the scripts are parsed along
with the rest of the document - it depends.
2) If what you said is indeed true, myDiv not defined, then how come
when my calling of print inside the Javascipt definition area works
then?
Click to expand...

When you call the function, myDiv has come to existence due to the
complete parsing of your HTML document.

Gregor
 
D

disappearedng

Dear Greg,
I don't think you are right
Please look at what I meant


<html>
<head>
<script type="text/javascript">
var print = function(string){
var reference = document.getElementById("myDiv");
reference.innerHTML += string + "<br/>";
};

/*
REF = {
div1 : document.getElementById("myDiv")

};

var print = function(string){
REF.div1.innerHTML += string + "<br/>";

};
*/

function init() {
print("Hello");
}

</script>
<body onload="init();">
<div id="myDiv"/>
</body>
</html>

Try uncommenting the commented part.
What you said was not possible because of the following scenario:

If the javascript is parsed before div was defined, then the top print
function will not work anyway because what revoked it was init() and
init() was called by body.

Both functions are executed at the same time in both scenarios. It
would be not be possible that in one scenario Div was defined and the
other not.
 
G

Gregor Kofler

disappearedng meinte:
Dear Greg,
I don't think you are right
Sigh...

<html>
<head>
<script type="text/javascript">
REF = {
div1 : document.getElementById("myDiv")

};
Click to expand...

REF.div1 is now "undefined". Since the browser hasn't come across the
div yet.
....
<div id="myDiv"/>
Click to expand...

.... now "myDiv" becomes available. Alas, too late.

....

Much later: The load event fires.
What you said was not possible because of the following scenario:
Click to expand...

Said to me by someone, who is completely clueless.
If the javascript is parsed before div was defined, then the top print
function will not work anyway because what revoked it was init() and
init() was called by body.
Click to expand...

Revoked? init() would be called once the body is completely loaded. But
REF.div1 was assigned long before that.

Gregor
 
D

disappearedng

Alright that clear things up.

Let me confirm with you
1) the "onload="init();"" part of my body is executed AFTER the entire
HTML has been parsed?
2) Hence the second print works because init() is called AFTER myDiv
has been created, and when init calls print THEN the javascript parser
looks up the already created myDiv element and provides a non null
reference?

I tried implementing the first print function in init and everything
worked. Thank you.

It's just that I had no idea that body's onload will only be called
when the ENTIRE html has been parsed.

Thank you
 
T

Thomas 'PointedEars' Lahn

disappearedng said:
1) the "onload="init();"" part of my body is executed AFTER the entire
HTML has been parsed?
Click to expand...

No, only after it has been *rendered* also (with some exceptions).
2) Hence the second print works because init() is called AFTER myDiv has
been created, and when init calls print THEN the javascript parser looks
up the already created myDiv element and provides a non null reference?
Click to expand...

Roughly speaking, yes.

What really happens in the majority of cases is: The client-side script
source code is parsed into language tokens according to the (modified)
ECMAScript grammar, and JIT-compiled into byte-code before execution.

The Virtual Machine that interprets (executes) that byte-code program then
calls a method of a DOM object that is an implementation of an interface
(method), as the result of the compilation. That method cannot return a
non-null value (with the meaning of `null' being implementation-dependent)
if the DOM object that represents the (HTML) element (an element object) has
not been registered in the DOM tree yet.

Sometimes element objects are created and registered in the DOM tree when
the corresponding element has been parsed. But since the parse tree of the
markup parser is incomplete until the last element (usually the `html'
element) has been parsed or inferred (because of optional tags), you cannot
be sure that the DOM tree is complete either until the `load' event of the
document (standardized in the W3C DOM Level 2 Events Specification) occurs.
That event can be handled with the intrinsic `onload' event-handler
attribute of the `body' element (among other, less reliable methods), as
standardized in the HTML 4.01 Specification.


PointedEars

P.S.: I selected the wrong menu item again, sorry for the e-mail.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Need help , Having problem with Drag n Drop ? 9
Need help , Having problem with Drag n Drop... 1
About as basic "Newbie-Question" that you can get. 3
How to remove the undefined thing? 1
Reversing output of user input by using while loop... 2
Multiple ajax calls at once 16
Image upload not working in browser 4
Javascript vertical drag div areas - not quiet there 3

Members online

Total: 2,317 (members: 2, guests: 2,315)
Robots: 111

Forum statistics

Threads
474,135
Messages
2,570,783
Members
47,339
Latest member
flaviu2

Latest Threads

Top