getElementById Method not working

JavaScript
1

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

A reference must be made after the element is loaded

window.onload=function() {
var target = document.getElementById("berenger");
alert(target.nodeName);
};

or place the script element just before the closing body tag.

3

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.

4

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

5

thank you for the explanation PhilipToop, greatly appreciated:)

6

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

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

Thank you, that makes sense.