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>