Force script to work from external file instead of AFTER and on page?

Forum Moderators: open

Message Too Old, No Replies

Force script to work from external file instead of AFTER and on page?

Script only works if it's on the page and physically after the code? :-\

JAB Creations

7:05 pm on Nov 22, 2005 (gmt 0)

I have a script that only works inline and only AFTER the ID is declared. While it works fine like that it's not how I want it (as this is going to be implemented in to another script altogether).

Below is the script and I want to make it work the way
it does below but from an external file linked from the head.

<html>
<head>
<title>Test 1</title>
</head>
<body>
<div id="content">
<p>Hello World</p>
</div>
<script type="text/javascript">
if (! document.getElementById("content")) {alert ("undefined");}
else {alert ("Defined");}
</script>
</body>
</html>

How I want the HTML file to look afterwards of course...

<html>
<head>
<title>Test 2</title>
<script src="script.js" type="text/javascript">
</head>
<body>
<div id="content">
<p>Hello World</p>
</div>
</body>
</html>

rocknbil

7:09 pm on Nov 22, 2005 (gmt 0)

EDIT: Looks like we're editing at the same time lol . . . . You should be able to also move the include line to the bottom too, it doesn't need to be in the head. :-)

(follows previous from unedited original)

You'e executing inline as opposed to a function. Did you try moving the script to the bottom, just before the closing body tag?

Remember pages load from top to bottom, and "content" is not yet defined when it gets to your js. I like putting my JS at the bottom whenever I can just to move the content higher to the top.

Fotiman

7:14 pm on Nov 22, 2005 (gmt 0)

You'll have to wrap it in a function and call it via the body onload event handler. For example:

function findContent()
{
if (! document.getElementById("content")) {alert ("undefined");}
else {alert ("Defined");}
}

<html>
<head>
<title>Test 2</title>
<script src="script.js" type="text/javascript">
</head>
<body onload="findContent();">
<div id="content">
<p>Hello World</p>
</div>
</body>
</html>

JAB Creations

7:19 pm on Nov 22, 2005 (gmt 0)

*Happiness*

YAY! Tested and it works!

*Croaks*

GAH! A body attribute!

How can I do this without adding attributes to the body element?

Didn't spot your post Bill...I understand the loading of top to bottom...one thing at a time though! ;)

window.onload might be the way to go?

rocknbil

7:49 pm on Nov 22, 2005 (gmt 0)

As I understand it, the onload in the body tag may kick off some pop-up blockers and render it non-functional (unconfirmed, by me ay least, so you may have to check that out.) So inline or window.onload() might be the way to go. I'm pretty sure if an inline doesn't contain any open() commmands it shouldn't cause pop-up blocker grief.

Fotiman

7:53 pm on Nov 22, 2005 (gmt 0)

You could try this:

function findContent()
{
if (! document.getElementById("content")) {alert ("undefined");}
else {alert ("Defined");}
}
window.onload = findContent;

And then get rid of the body attribute.

JAB Creations

7:59 pm on Nov 22, 2005 (gmt 0)

Rocknbill...I'm going by Section 608 and WIA (trying for AAA compliance) so that means being very strict about JavaScript which is fine because it forces me to figure out the structure or at least ask the right questions. So I'm doing everything I can to avoid JavaScript within the body element at all possible costs.

Fotiman thanks! I had the basic idea (the online but not the function aspect) but was not sure how to execute it.