Replacing Text On a Web Page

Do you work with JavaScript code sometimes?

Yes?

Well, I've got a present for you.

The present is a function you can use to replace certain areas of a web page with alternate content. The function is copy 'n paste; no modifications necessary:

///////////////////////////////////////////////
// Generic "write content into ID" function. //
///////////////////////////////////////////////
// Copyright 2006 Bontrager Connection, LLC
function WriteContentIntoID(id,content) {
if(document.getElementById) {
	var idvar = document.getElementById(id);
	idvar.innerHTML = '';
	idvar.innerHTML = content;
	}
else if(document.all) {
	var idvar = document.all[id];
	idvar.innerHTML = content;
	}
else if(document.layers) {
	var idvar = document.layers[id];
	idvar.document.open();
	idvar.document.write(content);
	idvar.document.close();
	}
} // end of WriteContentIntoID()

The area on the web page to be updated must be identified with an element id. DIV's, SPAN's, P's, and other tags can have id elements.

As an example, let's assume you have a DIV with the id="mystuff" element. And let's suppose you want to replace the content in the DIV with a "Hello!" between H1 tags.

This line of JavaScript code will do the trick:

WriteContentIntoID("mystuff","<H1>Hello!</H1>");

Pretty simple :)

Notice the two parameters (the items between the parenthesis')?

The first parameter is the value of the id. The second is the content. Both may be assigned to variables before calling the function:

var theID = "mystuff";
var theContent = "<H1>Hello!</H1>";
WriteContentIntoID(theID,theContent);

The WriteContentIntoID() function can be called as often as desired, with the same or different values for id and content.

The WriteContentIntoID() function can be used for pretty much any regular web page content to be replaced using JavaScript. Some ideas:

• Periodic update of national debt numbers.

• A clock or stopwatch, with the time perpetually updated on the page.

• Price changes effected by the amount of time spent reading the sales material.

• Custom greetings for specific time intervals while a visitor stays on the page.

• Presenting dice throw results.

• Printing random answers as in 8-ball fortune telling games.

As an example, let's assume you present a welcome message to your site visitor when your web page first loads. If the visitor stays around for, say, 20 seconds, you change the message to a "Here is more of the same" link.

This is how such a thing might be done. First, the welcome message:

<div id="welcome">
<h3>Welcome, welcome, welcome!</h3>
<h3>Hang around a bit (for a surprise).</h3>
</div>

Now, the JavaScript:

function ChangeIt() {
var newcontent = '<h1><a href="page.html">Click here</a> ' +
                 'for a web page with more of the same.</h1>';
WriteContentIntoID("welcome",newcontent);
}
setTimeout("ChangeIt()",20000);

The JavaScript built-in function setTimeout() waits 20 sections (20000 milliseconds) and then runs the ChangeIt() function, which uses WriteContentIntoID() to replace the content.

It really is that simple. Just be sure to have the WriteContentIntoID() available to your JavaScript code.

I think you'll enjoy playing with this fun little function.

Will Bontrager