SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question getElementById Method not working

    Hello,

    I began learning Javascript today with Sitepoints Simply JavaScript. Everything was going great until I got to page 69 and I was not getting an alert dialog for the following code:

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


    the html file looks like:

    <!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>The Running Man</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" />
    <script type="text/javascript" src="example.js"></script>
    </head>
    <body>
    <h1>
    Sniper (1993)
    </h1>
    <p>In this cinema materpiece,
    <a id="berenger" href="/name/nm0000297/">Tom Berenger</a> plays
    a US soldier working in the Panamanian jungle.</p>
    </body>
    </html>


    It didn't even return a null value. Please help.

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A reference must be made after the element is loaded
    Code:
    window.onload=function() {
    var target = document.getElementById("berenger");
    alert(target.nodeName);
    };
    or place the script element just before the closing body tag.

  3. #3
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    Quote Originally Posted by dogFang View Post
    A reference must be made after the element is loaded
    Code:
    window.onload=function() {
    var target = document.getElementById("berenger");
    alert(target.nodeName);
    };
    or place the script element just before the closing body tag.

    Thank you, both ways worked. What is the right way?

    Does this mean I will need to repeat window.onload=function() every time for each object that has an alert?

    what about using Core.start with init ? would that work? how?

    thank you
    Martin

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The script was executing before the document loaded therefore your getElementById was returning a null. The alert then errored because null is not an object and does not have any properties.

    By putting it in an onload event the statements are executed after the document has loaded.

  5. #5
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for the explanation PhilipToop, greatly appreciated

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does this mean I will need to repeat window.onload=function() every time for each object that has an alert?
    javascript has the concept of events. each event can be associated with a javascript function. When the event occurs the function is executed. There are numerous events (using the mouse or keyboard, setting focus to an input element etc etc). The onload is one such event and is associated with the html document. It is execute only once when the document has loaded.

    There are various ways of associating a function with an event. window.onload = function is just one. You can also do it on the body tag <body onload="dothisonload()"> (where dothisonload is a javascript function). You can also do it with an addEventListener or attachEvent method (which does depend on the browser as whether the method belongs to the window of document object). Good practice would be to use the last method.

    Here is a function to add your load function

    Code JavaScript:
    addLoadListener = function (fn) {
    	if (typeof window.addEventListener != 'undefined') {
    		window.addEventListener('load', fn, false);
    	} else if (typeof document.addEventListener != 'undefined') {
    		document.addEventListener('load', fn, false);
    	} else if (typeof window.attachEvent != 'undefined') {
    		window.attachEvent('onload', fn);
    	} else {
    		var oldfn = window.onload;
    		if (typeof window.onload != 'function') {
    			window.onload = fn;
    		} else {
    			window.onload = function() {
    							oldfn();
    							fn();
    						};
    		}
    	}
    };
     
    addLoadListener (function () {
    var target = document.getElementById("berenger");
    alert(target.nodeName);
    });
    what about using Core.start with init ? would that work? how?
    Don't understand Core.Start

  7. #7
    SitePoint Member
    Join Date
    Oct 2010
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, that makes sense.


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
  •