...

View Full Version : Script working in <body> but not <head>



Asher01
08-01-2011, 01:12 PM
I am very new to learning JavaScript and I already seem to have come across a problem.

I can get Scripts to work fine in the <body> but not all scripts seem to work in the <head>

For example, this works fine:



<html>
<body>

<p id="date"></p>

<script type="text/javascript">
<!--
document.getElementById('date').innerHTML = Date();
//-->
</script>

</body>
</html>


However, it won't work if I place the script in the head like this:



<html>
<head>

<script type="text/javascript">
<!--
document.getElementById('date').innerHTML = Date();
//-->
</script>

</head>
<body>

<p id="date"></p>

</body>
</html>


It could just be that I broke one of the fundamental laws of coding that I don't know or something but like I said, I've only just started JavaScript.
Also, the tutorial I have isn't to clear on the differences between using the <head> or the <body>. Just kinda says you can do both.

I'd like to use the <head> wherever possible because it would be so much neater to keep all the JavaScript in one place and all the HTML in another. Pretty much like you can do with CSS.

Anyway, I'd be much grateful if somebody can explain this to me.

devnull69
08-01-2011, 01:43 PM
You actually broke one of the fundamentals of javascript coding on websites :-)

The problem is that HTML code including script code is processed top down. Javascript code is being executed immediately when found. If you try to access DOM elements (like in your case the element with id 'date') you'll have to make sure that this element already exists. As it will only be processed after the javascript in the header, it doesn't exist yet. So you can do only two things

1. Place the javascript code behind all the elements. That's what you did
2. Move your <head> javascript code into an event handler that will be executed only after the page has finished loading (i.e. the DOM elements have been created) and leave everything in the <head> section


window.onload = function() {
document.getElementById('date').innerHTML = Date();
};

abduraooft
08-01-2011, 01:43 PM
You can't refer an element before it's loaded into the DOM.
When referring the element from <head>, you may delay the operation until the window has been loaded, like

<head>

<script type="text/javascript">
function myfunc(){
document.getElementById('date').innerHTML = Date();
}
window.onload=myfunc;
</script>

</head>

Asher01
08-01-2011, 02:02 PM
OK, I see. Thanks to both of you.

I was unaware of this as I hadn't actually read the DOM standards yet because apparently I should know JavaScript first. :/

How would that apply to an External JavaScript file? Since you would have to link to the external file in the <head>.

devnull69
08-01-2011, 02:23 PM
It's the same for external javascript files. They are being loaded from an external source but they work exactly the same way as embedded scripts.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum