JavaScript Tips and Tricks

Vary HTML or Content using JavaScript with document.getElementById:

  Did you ever want to change the contents of a Page, Cell or Header due to the result of some action
  such as a button press, mouseover or page load?

  JavaScript's document.getElementById has just what you want!   See my example below that changes cell contents
  at the click of a button. First lets look at the Code.

<SCRIPT TYPE="text/javascript">> function defjavafunc() { querydefcell = '<IMG SRC="coffeemug.gif" ALT="">This is Java!'; document.getElementById('querydefjava').innerHTML = querydefcell; // CHANGE CELL } //--></SCRIPT> <TABLE>
<TR><TD><A HREF="javascript:defjavafunc()"> <IMG SRC="hlp_buttn.gif" ALT=""></A></TD> <TD><SPAN id='querydefjava'>  What is Java?</SPAN></TD> </TR> </TABLE>

Here is a working example that is based on the above code.   Click the ? button to try it!
*** JavaScripting needs to be enabled!

Click Me to get your answer!   What is Java?

This example makes use of the .innerHTML attribute of document.getElementById that
affects the content between open and close tags such as <SPAN></SPAN> and <P></P>.

The tagged area is related to document.getElementById by the id= attribute.
We are using id='querydefjava' in our example.

Besides the .innerHTML attribute there are a number of others, Here are a few.

.title attrubute can be used to display variable tooltips! Think Advertisements!

.style.background.color can be used to change a page's background!

As you can see this is a very flexible and useful "function". We could go on but,
since this is only a tip, we'll stop here.

Maybe we'll create a little "tutorialette"! Let us know what you think.

Back to Website and Servers menu page

This page was last modified Friday October 26, 2007