...

View Full Version : Replacing a block of text using innerHTML



danecookrulezz
04-25-2009, 06:42 PM
For some reason this doesn't work. Please help me out if possible.

index.php:



<html>
<head>
<title>Testing</title>

<link rel="stylesheet" href="style.css" type="text/css" />

<script type="text/javascript" href="replace.js"></script>
</head>

<body>
<a href="#" onClick="replace()">Click!</a><br />
<div id="replace">
Original Content!
</div>
</body>
</html>


replace.js:



function replace(){
document.getElementById("replace").innerHTML="RAWR!";
}


style.css:



body{
color: #ffffff;
background-color: #000000;
}

div#replace{
background-color: #333333;
}



When I click the link, nothing happens.

Thanks,

edit, also, if I do
<script /> in the head the page won't even load, I had to use
<script></script>. Why is that?

bdl
04-25-2009, 07:36 PM
Your first problem stems from the fact that the external JS file is attempting to reference a DOM object that (at the time the script is loaded) doesn't exist. You must use an onload event handler, or put the SCRIPT tags that reference any DOM objects (whether they are inline or external scripts) below the document body contents, e.g.

(window.onload event handler)


<head>
<script>
window.onload= function() {
// script contents here, define onclick handlers
};
</script>
</head>
<body>

(....or.... after the body has loaded)


<body>
<div id="results"><!-- results go here ---></div>
<div id="controller">
<a href="#" onclick="showSomething();">Show me something!</a>
</div>
<script>
/*
* SCRIPT tag below the document body contents
* will load after the DOM has loaded and is ready
* so.... we can reference DOM elements in it
*/
// the results div, this exists at this point in time
var resultsDiv= document.getElementById("results");
// our function for the onclick handler
function showSomething() {
// test to be sure the targeted div exists
if ( resultsDiv) {
// send some HTML to it
resultsDiv.innerHTML= "<p>Is the DOM ready?</p>";
}
}
</script>
</body>


The second problem (using <script/>) is just a matter of fact. You cannot use a "single tag" element. There must be an opening and closing SCRIPT tag regardless of whether it's an externally linked script or inline. Would be nice, but it's not possible.

danecookrulezz
04-25-2009, 07:55 PM
Thank you very much, could you explain to me how to do this?

"// script contents here, define onclick handlers"

How do I define onclick handlers?


I tried the other method putting the script below the content, and it worked flawlessly, but I'd like to keep the script external if possible.

Edit: Got the other thing to work.

adios
05-02-2009, 10:05 PM
There is no such attribute as href for the <script> tag.
Try src.

Perfectly OK to reference uncreated DOM objects in the header, so long as that reference is in a function (i.e. not immediately called) and there is no chance of it being called before the element is rendered. In this case the link which calls it is right above it - if you're worried about a user clicking in the nanosecond between those elements being parsed, play it safe:



function replace()
{
var el = document.getElementById("replace");
if (el) el.innerHTML = "RAWR!";
}

Probably not a bad habit to develop. Avoid using global variables - actually, any variables - with common names like 'replace' - the chance of a namespace collision with an already existent property is too great, and will drive you up a tree. And never id an element with an already existing variable name! IE turns these into global variables. It shouldn't, but they wanted to help...

I'll spare you the usual admonition against using innerHTML.

http://www.brainjar.com/dhtml/intro/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum