SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    GetElementById Error

    Hi! I hope you can help... I've just started learning JavaScript and I'm trying to find an element by ID. It doesn't work at all for me. I can't understand where is a mistake? I type everything like it was in the book...

    My html page:

    Code:
     
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <title>JavaScript learning</title>
    
    <script type="text/javascript" src="script.js"></script>
    
    </head>
    
    <body>
    
    <div id="navigation">
    
    <ul>
    
    <li><a href="index.html">Home</a></li>
    
    <li><a href="about.html">About us</a></li></ul>
    
    </div>
    
    <div id="left" class="boxes">
    
    <a href="about.html" class="heading"><h3>Our company</h3></a>
    
    Sed malesuada risus eget velit. Etiam nunc.
    
    </div>
    
    </body>
    
    </html>
    And my javascript:

    Code:
     
    
    var x = document.getElementById("left");
    
    alert(x.nodeName);
    The firefox error console says:
    x is null

  2. #2
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Im noob too, so i may(very likely) be wrong.

    a node is textdata inside a tag, if you have a tag inside a tag the answer will be null.

    try alert(x.innerHTML);

    does this function give you what you want?

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also, you might need this...

    window.onload = function() {

    // put your code here

    }

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately not Thanks any way...

  5. #5
    SitePoint Member
    Join Date
    Aug 2008
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gemmes View Post
    also, you might need this...

    window.onload = function() {

    // put your code here

    }
    This worked!!! Thank you! I can carry on reading now

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is that JavaScript inside the external 'script.js' file?

    In that case, the problem is that you're executing the JavaScript code before the element with id="left" has been created. The JavaScript code is executed where the <script> tag is, so there aren't any elements in the document body yet.

    If you move the <script> tag to the end of the body (just before the </body> tag, it should work. Alternatively, as gemmes said, you need to execute your code via an onload event handler so that the DOM tree has been created before you run your script.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Member
    Join Date
    Aug 2008
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you!!! Gemmes helped me to solve the problem and you explained how it works. The best way to learn.

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agreed. If you not only learn how to fix the problem, but also why it didn't work in the first place, you can avoid making the same mistake in the future. Saves a lot of time in the long run.
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    I'm also a beginner and I'm having the same problem with getElementsByTagName; I've tried the windows.onload suggestion and the positioning of the script late in the file. From the following code, I still get "undefined". I just know it's related to the timing, but can't see why. I'm using XHTML by the way. I'd appreciate any pointers to get me past this early block!

    <head>
    <title>Simple page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>
    <body>
    <p>this is the first para</p>
    <p>this is the second para</p>
    <ul>
    <li>First item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
    </ul>
    </body>
    <script type="text/javascript" src="new1.js"></script>
    </html>

    and in new1.js:
    var paraTags = document.getElementsByTagName('p');
    alert(paraTags.nodeName);

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @sjmatthews: (welcome to SitePoint Forums! )

    Your problem is a different one. The getElementsByTagName() function doesn't return a Node object, but a NodeList. A NodeList doesn't have a nodeName property. It's similar (but not identical) to an Array and contains Node objects.

    Try,
    Code JavaScript:
    var paraTags = document.getElementsByTagName("p");
    for (var i = 0; i < paraTags.length; ++i) {
        alert(i + ": " + paraTags[i].nodeName);
    }
    This will be a very boring function, though, since every paragraph will have the same node name ("P", or "p" if you're using real XHTML).
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Member
    Join Date
    Aug 2008
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sjmatthews View Post
    I'm also a beginner and I'm having the same problem with getElementsByTagName; I've tried the windows.onload suggestion and the positioning of the script late in the file. From the following code, I still get "undefined". I just know it's related to the timing, but can't see why. I'm using XHTML by the way. I'd appreciate any pointers to get me past this early block!

    <head>
    <title>Simple page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>
    <body>
    <p>this is the first para</p>
    <p>this is the second para</p>
    <ul>
    <li>First item</li>
    <li>Second Item</li>
    <li>Third Item</li>
    <li>Fourth Item</li>
    </ul>
    </body>
    <script type="text/javascript" src="new1.js"></script>
    </html>

    and in new1.js:
    var paraTags = document.getElementsByTagName('p');
    alert(paraTags.nodeName);
    I've read in my book, that XHTML and Embedded JavaScript don't mix. You have to put you JavaScript in another file or change Doctortype to HTML. I can be wrong though!

  12. #12
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    @sjmatthews: (welcome to SitePoint Forums! )

    Your problem is a different one. The getElementsByTagName() function doesn't return a Node object, but a NodeList. A NodeList doesn't have a nodeName property. It's similar (but not identical) to an Array and contains Node objects.

    Try,
    Code JavaScript:
    var paraTags = document.getElementsByTagName("p");
    for (var i = 0; i < paraTags.length; ++i) {
        alert(i + ": " + paraTags[i].nodeName);
    }
    This will be a very boring function, though, since every paragraph will have the same node name ("P", or "p" if you're using real XHTML).
    Thanks for the welcome and for explaining this so quickly. I don't mind it being boring if it just sends a result (anything but undefined!) back to the screen - which it now does! Many thanks; this has cleared my confusion and I can get on!

  13. #13
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vanklik View Post
    I've read in my book, that XHTML and Embedded JavaScript don't mix. You have to put you JavaScript in another file or change Doctortype to HTML. I can be wrong though!
    Thanks for the reply - I do think you're right, so I did keep it in an external file. Cheers.

  14. #14
    SitePoint Member
    Join Date
    Aug 2008
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sjmatthews View Post
    Thanks for the reply - I do think you're right, so I did keep it in an external file. Cheers.
    Sorry, I didn't read your code properly

  15. #15
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vanklik View Post
    Sorry, I didn't read your code properly
    For us beginners, it's a useful reminder regardless! By the way, I finally got some useful information onto the screen with
    Code JavaScript:
    var listTags = document.getElementsByTagName("li");
    for (var i = 0; i < listTags.length; ++i) {
        alert(listTags[i].childNodes[0].nodeValue);
    }
    Exciting huh? It'll take me months to get the hang of this stuff at the rate I'm going, but we have to start somewhere. I think I need a course rather than a book.

  16. #16
    SitePoint Member
    Join Date
    Aug 2008
    Location
    UK
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sjmatthews View Post
    I think I need a course rather than a book.
    Agreed... I usuall use several books on the same subject plus Internet (the best resourse!). Good luck

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It's debatable whether the internet as a whole is a good resource or not, because old outdated information hangs around for a long time.

    It helps to use resources that try to remain up to date, such as http://www.sitepoint.com/forums/showthread.php?t=511030
    Last edited by paul_wilkins; Aug 20, 2008 at 15:53.
    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
  •