javascript in HEAD tag doesn't work

**thmz** · Oct 10, 2002, 03:41

i'm having problems with this piece of code in that if i put it in the HEAD tag it doesn't work..if i put the SCRIPT below the P tags it works fine; I don't see any logical reason for it to not work when placed in the HEAD tag?

Is there any workaround to make it work in the HEAD tag? It would be even better if I could link it outside of the html document

Code:

<html>
<head>
<title>and yet some more</title>

<style type="text/css">

body	{
	background-color: #666
	}

p	{
	font-family: verdana, arial, sans-serif;
	font-size: 12px;
	color: #f0f0f0
	}

</style>


</head>

<body id="body">
	<p> some text here</p>
	<p>Click to 
		<a href="#" onclick="return increaseFontSize()">increase font size</a>
	or 
		<a href="#" onclick="return changeText()">change text string</a>
	</p>


<script type="text/javascript">
	fontObj=document.getElementById("body").childNodes[0]
	textObj=fontObj.childNodes[0]
	function changeText()
		{
		textObj.data="I need some aspirin now..."
		}
	function increaseFontSize()
		{
		fontObj.style.fontSize="20px"
		}
</script>
	
</body>
</html>

**Mark T.** · Oct 10, 2002, 03:46

You can link to an external .js file using this code in your HEAD tag:

Code:

<script language="JavaScript" src="url here"></script>

**thmz** · Oct 10, 2002, 04:23

errr sorry but i know how to link to an external file, but the problem is that this javascript code is not working when placed in the HEAD tag; see the code is below the P tags, they are there now because it's the only place at the moment that's working and my question was why it doesn't work if I move this piece of javascript to within the HEAD tag

**Mark T.** · Oct 10, 2002, 04:32

Have you tried replacing your <script> tag to:

Code:

<script language="JavaScript">
...
</script>

**thmz** · Oct 10, 2002, 04:44

hmmm i think that actually language="javascript" is deprecated? not sure though, but i was advised to use type=text/javascript instead.

and it doesn't make any difference at all

**siteguru** · Oct 10, 2002, 07:35

Most javascripts will work in the <head> of the document. The killer for your script is this line ...

fontObj=document.getElementById("body").childNodes[0]

... If the code is in the <head> then the <body> tag has not yet been written and so fontObj will be "undefined". Putting it at the bottom of your page works because pretty much all the page elements exist by then.

I should also say the type="text/javascript" is the correct definition.

**thmz** · Oct 10, 2002, 14:23

weird because i'm sure i have used other scripts written in the same manner (using getElementById) that worked fine in the <head> tag

**blufive** · Oct 10, 2002, 16:03

It'll all depend on when certain parts of the code are executed. In your code above, the "textObj=..." and "fontobj=..." lines are outside of functions, so they will be executed as the browser loads the page. If they're in the header, then the elements they are attempting to access might/will* not exist yet.

*this is fuzzy, and may even vary from machine to machine and browser to browser.

However, I'll predict that if these lines were INSIDE the functions, then they wouldn't get executed until the functions were triggered by user actions. At that point, the objects WOULD exist, so the code should work.

In this way, some code in the header will work, but slightly different code will fail.

**thmz** · Oct 10, 2002, 16:07

hmm i see, didnt try yet but seems right. thanks a lot blufive!

The SitePoint Forums have moved.

User Tag List

Thread: javascript in HEAD tag doesn't work

Thread Tools

Display

javascript in HEAD tag doesn't work

Bookmarks

Bookmarks

Posting Permissions