SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question document.getElementsByTagName problem

    I'm currently reading chapter 3 of Simply JavaScript learning how to find elements by tag name. When I insert the code

    var listItems=document.getElementsByTagName("li");
    var numItems=listItems.length;
    alert(numItems);

    I get 0. However, I have three <li> in my document.

    When I run

    var listItems=document.getElementsByTagName("*") ;

    I get a length of 5 in my alert (<html>, <head>, <title>, <meta>, <script>, ). I tested for these tags individually (e.g. getElementsByTagName("html") and they are accounted for.

    Why am I unable to target the body, ul, or list tags? I checked my document and it's essentially the same as the book's, except for the text between the elements.

    What is it that I am missing?

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    post your html and javascript so we can see exactly what is going on.

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
      <head>
        <title>Canucks.com</title>
        <meta http-equiv="Content-Type"
          content="text/html; charset=utf-8" />
        <script type="text/javascript" src="canucks.js"></script>
      </head>
      <body>
        <h1>
          Top News
        </h1>
        <ul>
          <li>
            Sidney Crosby traded to Vancouver Canucks.
          </li>
          <li>
            Ovechkin to sign long-term deal with Vancouver Canucks.
          </li>
          <li>
            Canucks blow out Ducks 8-0.
          </li>
        </ul>
       </body>
    </html>

    Code JavaScript:
    var listItems = document.getElementsByTagName("li");
    var numItems = listItems.length;
    alert (numItems);

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    post the code exactly as it appears in canucks.js

    you need to call the js to get the li elements after the document has finished loading and not before, or at least after the <li>'s have finished loading.

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is the only thing I have in canucks.js right now. The rest I put into comment tags since I was not sure if it was interfering with it.

    How do I ensure that the li elements load first before being called?

  6. #6
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    either

    1) put

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

    just above the </body>

    2) leave the call to canucks.js where it is in the <head> and change your code to

    Code:
     
    window.onload=function() {
         var listItems=document.getElementsByTagName("li");
         var numItems=listItems.length;
         alert(numItems);
    }

  7. #7
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I spent over an hour last night trying to figure out why it wasn't working. This is sweet relief.

  8. #8
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you're welcome

    I'd be surprised if your book doesn't mention somewhere in that example that elements must be loaded before you can access them using javascript. maybe it's in the "fine print" somewhere

  9. #9
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Haha it was mentioned at the end of Chapter 2. It talked about the problems which occur if your JavaScript runs before the HTML is done loading. It mentioned Core.start, but said further detail would be provided in later chapters. Therefore, I assumed all the code I ran wouldn't have to worry about this issue -_-

  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 Codeine24/7 View Post
    Haha it was mentioned at the end of Chapter 2. It talked about the problems which occur if your JavaScript runs before the HTML is done loading. It mentioned Core.start, but said further detail would be provided in later chapters. Therefore, I assumed all the code I ran wouldn't have to worry about this issue -_-
    Another solution instead of using Core.start is to move your script to the end of the body, just before the </body> tag. That way the rest of the body is available by the time the script does its thing.

    However, for the sake of working in with the rest of the book, you should stick with using Core.start instead of other solutions.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds good

  12. #12
    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 Codeine24/7 View Post
    Sounds good
    Also, the errata can help to clear up some mistakes that made it in to the book.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!


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
  •