SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    brazil
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript in HEAD tag doesn't work

    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>

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can link to an external .js file using this code in your HEAD tag:

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

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    brazil
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried replacing your <script> tag to:

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

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    brazil
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,631
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ian Anderson
    www.siteguru.co.uk

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    brazil
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    weird because i'm sure i have used other scripts written in the same manner (using getElementById) that worked fine in the <head> tag

  8. #8
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    brazil
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm i see, didnt try yet but seems right. thanks a lot blufive!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •