Browser-Independent Implementation

One of the classic incompatibilities between Internet Explorer and Netscape Navigator is the way they update DHTML elements. Internet Explorer supports the innerHTML property for several elements, including the SPAN and the DIV. Netscape Navigator, on the other hand, does not support the innerHTML property. The trick to overcome it is by writing to the document property of the DHTML element. The first problem in implementing such a write operation is that it does not work while loading the page. You have to write to the DHTML element only after the page is fully loaded. To do that, we define an event handler, onload():

onload = start;

And start() just writes a welcome message to the phone display:

function start() {
  outputStringToDisplay(welcomeStr);
}

The other problem is that when you write to the DHTML in Netscape Navigator, you completely blank the other attributes of the DHTML, like its frame, its background color, etc. The solution we use here was to embrace a SPAN element within a DIV element:

<DIV ID="displayID" STYLE="position: absolute">
  <SPAN ID="foundSoFar" STYLE="position: absolute; border:
    2px red solid; width: 250">
  </SPAN>
</DIV>

In Internet Explorer, we just change the innerHTML parameter of the inner SPAN, foundSoFar. In Netscape Navigator, we refer to the outer DIV as the DHTML element, and write the SPAN element every time from scratch. Thus, we need to write the border and color specifications, for example, every time:

function outputStringToDisplay(str) {
  if (nameCode == 2) {
    with (document.displayID.document) {
      open();
      str = '<SPAN STYLE="position: absolute; border: 2px red solid;
        width: 235">' + str + '</SPAN>';
      write(str);
      close();
    }
  }
  else {
    document.all.foundSoFar.innerHTML = str;
  }
}

Again, notice how Internet Explorer anchors on the inner SPAN foundSoFar element, while Netscape Navigator anchors around the outer DIV displayID element.

Next: The code