Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts

    Script working in <body> but not <head>

    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:

    Code:
    <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:

    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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
    Code:
    window.onload = function() {
       document.getElementById('date').innerHTML = Date();
    };

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    Code:
    <head>
    
    <script type="text/javascript">
    function myfunc(){
    document.getElementById('date').innerHTML = Date();
    }
    window.onload=myfunc;
    </script>
    
    </head>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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>.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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.


  •  

    Posting Permissions

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