Hello, and welcome to... The Future!

Here in [the future], we call our [Netscape] browser [Mozilla Firefox|Firefox], or [Mozilla]. In the future, we don't use [eval()] and document.write(), we use the [Document Object Model] (DOM). We never use document.all or document.layers, except to test what [web browser|browser] we're dealing with.*

[DOM Level 2] introduced a suite of handy methods that allow developers to access single objects or lists of objects quickly and decisively. The two most common are [getElementById()] and getElementsByTagName(). These can be called on the document object itself, or any other [object reference].

I have my object, now what?

There are all kinds of interesting [user interface|interface] features grouped under the heading of [DHTML], but most involve

Showing or hiding an object
Changing the contents of an object
Changing a [cascading style sheets|style] property on an object

Here are a couple handy script [snippets] to perform these common tasks. They don't require [browser detection] - just enclose them in an if (document.getElementById) { } block to keep [old browsers] from choking.

Note: These examples assume that they're called with either

<SOMETAG [onclick]="myFunction(this)">

or

<SOMETAG onclick="myFunction(document.getElementById('OTHERELEM'))">

for performing actions on other objects.

Toggling an object's [visibility]

There are two CSS properties controlling visibility. One, display, effectively removes the object from the [document]. The other, visibility, just hides it. The caveat is that the latter doesn't change the space the object takes up. In the script below, substituting visibility for display should pose no problem.

function myFunction(obj) {
   if (obj.style.display == "none") {
      obj.style.display = "[block]";   // can also be "[inline]"
   } else {
      obj.style.display == "none";
   }
}

Mucking with object contents

This is especially handy for, let's say, an [editable table] where your user can add new rows for data [on the fly]. However, this is just a simple example. The really cool stuff is left as an exercise for the reader.

function myFunction(obj) {
   var contents = obj.[innerHTML]; // note we're ignoring [Java]'s
                                 // capitalization conventions here
   if (contents.indexOf("edited") < 0) {
      obj.innerHTML = "edited";
   } else {
      obj.innerHTML = contents + ", edited again";
   }
}

If we wanted to be really slick, we'd create a new [TextArea] object or something, set its value property with our [String], and attach it to the element represented by obj by calling the add() method on its [childNodes] collection. But we're not that slick.

Changing a style property

This is the same idea as in the display toggling script. The one thing that tends to trip people up is the [syntax] of style properties in [Javascript]. It's actually really easy to convert between them, though. They'll stay the same for one word property names and, for property names with dashes, replace the dashes with [camel casing].

function myFunction(obj) {
   var otherField = document.getElementById("myOtherField");
   var isError = false;

   if (obj.value.length < 1) {
      isError = true;
   }
   if (isError) {
      otherField.style.color = "red";    // should actually use Hex
   }
}

Embrace the future! [Refactor] all those calls to eval() right out of existance and enjoy the power of the DOM!

More on the DOM: http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html

* [ascorbic] wants it noted that rather than check for browser, we should check for the availability of the method or property we want to use. In almost every case, this is true. But I still sometimes use document.all to test for IE when I need to make on the fly size adjustments, as IE has its own special way of calculating widths and heights. I actually have exactly one script where I do this, but it wouldn't function without a test for IE. Anyway, where possible, follow ascorbic's advice.

DHTML implementation in Netscape and Internet Explorer