SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    newbie learning javascript

    hi , im trying to learn javascript and i have the book "simply javascript" , so my problem is that i doing an exercise that is:

    the html document:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="jsfile/dom01.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>target</title>

    </head>

    <body>
    <h1 id="berenger">Sniper (1993)</h1>
    <p>In this cinema masterpiece,<a href="age.html">Tom Berenger</a> plays a US soldier working in the Panamanian jungle.</p>
    </body>
    </html>


    the javascript document:
    // JavaScript Document
    var target = document.getElementById("berenger");
    alert(target.nodeName);

    and the problem is that i should get an pop up window with "a",
    and i dont get nothing just an error in the firebug inspecto saying that "target has no properties" , is any one that can help me please?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unless the stuff in your js file is contained in a function, it is executed as soon as it loads, and if that's the case then the element with id="berenger" doesn't exist yet.

    Take a look at this thread http://www.sitepoint.com/forums/showthread.php?t=536063
    to see how to make stuff happen once the entire document has loaded.

    Also, you will get a popup window with "h1" because the nodeName of the element with id="berenger" is h1.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If you look at your HTML, you will see that your <script> element is before the <body>. When the browser loads your document, it parses the javascript in the <head> before it does anything with the body. Since at this point the browser doesn't know "berenger" exists, you have to tell the browser to wait until it has finished loading the body.

    One way to do this is to use the "onload" event on the window object. Traditionally, you would do it like this:
    Code:
    window.onload = start;
    But modern browsers can use addEventListener:
    Code:
    if (window.addEventListener) window.addEventListener('load', start, false);
    else if (window.attachEvent) window.attachEvent('onload', start);
    The second line is for IE which uses a different method to the standard way.

    I suggest you read this series of articles, they are a very good introduction to events (the window object can host lots of events, one of them being onload. Also, perhaps you should read your book more thoroughly as I am sure it covers this issue.

    P.S.: Please get rid of the Transitional doctype. Use a strict one instead.

  4. #4
    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)
    Another way is to place the script at the end of the body.
    Then, the page elements are all immediately available to the script and no onload of event listeners need to be done in order to gain access to the page elements.

    I would say your most appropriate solution is to move the script to the bottom of the page. Then you're in line with the recommendations for speeding up your web site as well.
    http://developer.yahoo.com/performance/rules.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thank you all , i have place the code at the end of the body and it works, and i will follow your advice and read the articles, ok thank you all again.


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
  •