Document.getElementsByTagName problem

JavaScript
1

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”):wink: 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

post your html and javascript so we can see exactly what is going on.

3 

<!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>



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

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

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

either

  1. put

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

just above the </body>

  1. leave the call to canucks.js where it is in the <head> and change your code to
 
window.onload=function() {
     var listItems=document.getElementsByTagName("li");
     var numItems=listItems.length;
     alert(numItems);
}
7

Thanks! I spent over an hour last night trying to figure out why it wasn’t working. This is sweet relief.

8

you’re welcome :slight_smile:

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

9

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

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.

11

Sounds good :slight_smile:

12

Also, the errata can help to clear up some mistakes that made it in to the book.

13

Thanks!