ansaurus

Question

Answer 1

+12 A:

Since the <script> tag is inside the <head> tag, it runs before the body is parsed, so the myHeader element doesn't exist yet.

You need to put the <script> block at the end of the <body> tag and accept answers to your questions. (By clicking the hollow check marks)

SLaks 2010-04-26 21:47:34

-OR- put the whole shabang in a `document.onLoad` function.

dclowd9901 2010-04-26 21:54:44

Answer 2

+1 A:

Move your script to the bottom in this case, like this:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
</head>
<body>    
<h1 id="myHeader">Click me!</h1>    
<script type="text/javascript">
<!--
    var x=document.getElementById("myHeader");
    alert(x.innerHTML);
//-->
</script>
</body>
</html>

Currently, it's executing before the element exists, so it's erroring because it's not finding anything, and x is undefined. Running your script at the end of the body will resolve this.

Nick Craver 2010-04-26 21:47:57

Answer 3

+3 A:

Or leave it in the <head> but wrap it in a function and call it when <body> is loaded

<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/tdt/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<script type="text/javascript">
<!--
    function init(){
      var x=document.getElementById("myHeader");
      alert(x.innerHTML);  
    }

//-->
</script>
</head>
<body onload="init();">

<h1 id="myHeader">Click me!</h1>

</body>
</html>

Manuel Bitto 2010-04-26 21:48:11

Using inline attribute event handlers is not considered best practice. It's much cleaner to assign a function directly -- `window.onload = function() { ... }`

friedo 2010-04-26 21:51:54

Answer 4

+2 A:

The problem is that at the moment you call the getElementById function the DOM hasn't finished loading yet, so no element myHeader exists. You need to execute this code when the DOM has finished loading. For example:

window.onload = function() {
    var x = document.getElementById("myHeader");
    alert(x.innerHTML);
};

If you use the popular jQuery framework, your code might look like this:

$(function() {
    var x = $("#myHeader");
    alert(x.html());
});

and it will work with most browsers.

Another option is to put your script just before closing the body tag:

<h1 id="myHeader">Click me!</h1>

<script type="text/javascript">
<!--
    var x=document.getElementById("myHeader");
    alert(x.innerHTML);
//-->
</script>
</body>

As the DOM is loaded sequentially once your script starts executing the myHeader element will already be loaded.

Darin Dimitrov 2010-04-26 21:48:36

Answer 5

A:

Your script is running before your HTML is loaded. Move the script to the bottom or delay execution until the page has loaded.

Also, you never need to use  to hide your script. There's nothing to hide it from

Diodeus 2010-04-26 21:48:39

Answer 6

A:

how do you think the browser would know to call your code after clicking the header? you'd need to extract the alert(something) into a function, e.g.

function hello(){
    alert("hello world");
}

and to the h1 element add onClick="hello()" attribute.

Axarydax 2010-04-26 21:49:47

He isn't trying to make a click event.

SLaks 2010-04-26 21:50:06

I just thought that the "click me!" header was descriptive enough, that OP was trying to *do* something with clicking it. Way to make a red button that says "Push me", but the operation is in reality in controlled by a remote sensor, duh

Axarydax 2010-04-27 06:14:53

Answer 7

A:

This won't work because the browser executes your script immediately upon seeing it, which is before your h1 tag is parsed and added to the DOM.

You could put the <script> tag at the end of yoru document, but a better way is to defer execution by putting your alert in the window's onload handler.

If you're interested in using a framework like jQuery, it provides a similar ready event.

friedo 2010-04-26 21:50:10

ansaurus

tags:

views:

answers:

Simple Javascript Won't work

related questions