SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript Question

    Hi All,

    I am currently working through Sitepoint's "Simply Javascript" book but I have come to a bit of a stumbling block...

    In one of the examples using the getElementById method the code reads:

    Code JavaScript:
    var target = document.getElementById("berenger");
    alert(target.nodeName);

    However when I try this in on my Mac it doesn't work, the page loads up but the alert doesn't show despite the fact that there is an id with the relevant value in the HTML.

    Can anyone help?

    Thanks,
    Paolo

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,042
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    You either need to place that code at very bottom of the document before the closing body tag, or use window.onload = function() { ... };. Elements are not accessible until they have loaded.
    The only code I hate more than my own is everyone else's.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by paolodipasquale View Post
    Hi All,

    I am currently working through Sitepoint's "Simply Javascript" book but I have come to a bit of a stumbling block...

    In one of the examples using the getElementById method the code reads:

    Code JavaScript:
    var target = document.getElementById("berenger");
    alert(target.nodeName);

    However when I try this in on my Mac it doesn't work, the page loads up but the alert doesn't show despite the fact that there is an id with the relevant value in the HTML.

    Can anyone help?

    Thanks,
    Paolo
    Pages 58-59 are about unobtrusive scripting in the real world, where the book takes you through using the init method of its Core library.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,
    Does that mean that I shouldn't worry if the example is not working for me?
    Thanks,
    Paolo

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by paolodipasquale View Post
    Does that mean that I shouldn't worry if the example is not working for me?
    No, you should worry, as this is important. I assume Paul means that the script is not running because the JS is operating before the page has fully loaded. You could try placing the script just before the closing <body> tag and see if that makes any difference.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ralph.m View Post
    No, you should worry, as this is important. I assume Paul means that the script is not running because the JS is operating before the page has fully loaded. You could try placing the script just before the closing <body> tag and see if that makes any difference.
    It means, according to the book, that you should put the scripting code within the init method that they take you through on pages 58 and 59 of the book, and use in pretty much all of the code examples from their code archive.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys, thank you for your patience but I'm still not getting this...
    What do you mean by placing the code just before the body tag? I have the Javascript code on a separate file with extension .js.
    All I'm trying to do is get the following code to work

    var target = document.getElementById("berenger");
    alert(target.nodeName);

    I have linked the to the js file in my html using the below

    <script type="text/javascript" src="example.js"></script>

    What else do I need to actually include in my .js file in order for it to work?

    Thanks again.

    Paolo

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by paolodipasquale View Post
    What else do I need to actually include in my .js file in order for it to work?
    When the page is loading scripts, whatever is below them does not exist.

    There are a couple of ways to deal with this.

    One way is used by Simply JavaScript, where it uses an init loader technique.
    All information is in the book about how it uses the Core library to init your code.

    Another way is becoming more and more popular now that removes the need for such init loaders, and that is to put your script at the end of the body, just before the </body> tag.

    For example:

    Code html4strict:
    <html>
      <head>
        ...
      </head>
      <body>
        ...
        <script src="script.js"></script>
      </body>
    </html>

    By placing your script however at the end of the body, the rest of the page above it has already loaded and is available for your script to work with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works by placing the script before the closing body tag. I need to get more familiar with the init loader technique. Are there any disadvantages to placing the script just above the closing body tag?

    Thank you so much for your help Paul you are a legend!

    Thanks,
    Paolo

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by paolodipasquale View Post
    It works by placing the script before the closing body tag. I need to get more familiar with the init loader technique. Are there any disadvantages to placing the script just above the closing body tag?
    The disadvantage of placing your script at the end of the body, is that sometimes you might be using a CMS that doesn't allow that type of placement to occur.
    The disadvantage of the init loader technique is that it takes longer until your script can actually run.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •