Scrolling JavaScript Banners: Filling Banner's Elements - Doc JavaScript

Filling the Banner's Elements

Once we've created the banner's child elements, it's time to fill them up with content. The following function does the job:

function fillBanner() {
  var whichEl;
  if (NS4) {
    for (var i = 0; i 
  } else {
    for (var i = 0; i 
  }
}

The first thing you probably noticed is that this function is actually separated into two portions: one for Navigator 4.0x, and one for Internet Explorer 4.0x. A simple for statement loops through the array's elements, and prints each message to the corresponding element on the page. For example, the HTML text stored in ar[0] is displayed in message0. Navigator 4.0x uses the well-known document.write() method to print the content to the element's document, while Internet Explorer 4.0x simply updates the element's innerHTML property. See Column 3, "Rotating Text Banners", for more information in these methods.

Note that the function would be several lines shorter if we used one loop for both browsers rather than a loop for each browser. But that would require an if statement for each execution of the loop's body, which would be inefficient.

The fill() function is only invoked once, at the beginning. It assigns the necessary HTML content for each message. Notice that eval("message" + i) returns a reference of the current child element on both browsers. If i is 0, for instance, the current element is eval("message0"), or message0. This object represents the first element in Navigator 4.0x because the Layer() constructor assigned the first child element to a global variable named message0. message0 also reflects the first element in Internet Explorer 4.0x, because our makeIE() function assigned that value as the element's ID attribute.

The first statement may seem unnecessary at first, but it does have a role. It defines the new variable, whichEl, as a local one, because we only need it within the function. Furthermore, var should only be used once per variable, so it is never placed within a loop.

Created: February 10, 1998
Revised: February 10, 1998

URL: https://www.webreference.com/js/column13/fill.html