Keeping DOM seperate from html and css -- HELP!

**richbai90** · Jun 1, 2008, 19:47

I am incredibly new to javascript, in fact I just started reading Simply Javascript yesterday. I'm learning about DOM and I can't seem to understand why a simple expression like this:

Code:

var koko = document.getElementById("koko");
var kokoHref = koko.getAttribute("href");
alert(kokoHref);

relative to this html:

Code:

<body>



<a id="koko" href="http://www.koko.org/">Let's all hug Koko</a>


</body>
</html>

Can't be put in an external javascript file and referenced with a simple

<script type="text/javascript" src="jscript.js"></script>

in the head section.

Instead to get this simple script to run properly it has to be placed at the bottom of the html just before the </body> tag. It just looks ugly to me, and all along in all the internet scripting I've done, I've always been told to keep the different scripts, that is html and css separate...but apparently javascript doesn't work like that?

I'm so confused can somebody help please?

**mrhoo** · Jun 1, 2008, 20:09

In the head, the elements defined in the body don't exist yet.

There is no element with the id of 'koko' when you reference it.

You can put the script element in the body, as a src reference, anywhere after 'koko' is introduced.

Or you can write your code so that it is called after the page loads, from a <script src=url in the head:

//(js file)

Code:

window.onload=function(){
  alert(document.getElementById("koko").href);
}

**richbai90** · Jun 1, 2008, 20:26

Oh shoot thank you that makes soo much more sense!!

The SitePoint Forums have moved.

User Tag List

Thread: Keeping DOM seperate from html and css -- HELP!

Thread Tools

Display

Keeping DOM seperate from html and css -- HELP!

Bookmarks

Bookmarks

Posting Permissions