Have the following script for school and I can't figure out how to complete Step 3b using the examples given in our somewhat mediocre book... All other functions are finished and the complete project seems to function correctly.

I have included the required steps as comments before each function. Thank your for any assistance and explanations you may provide.

- Drew

New Perspectives on JavaScript, 2nd Edition
Tutorial 8
Case Problem 1

Author: XXX
Date: September 2, 2012

Filename: banners.js

Global Variables
Used to track the next ad to be displayed in the banner box


addEvent(object, evName, fnName, cap)
Run the function fnName when the event evName occurs in object.

Create the banner box and stacked collection of banner ads

Change the ad displayed in the banner box by changing the stacking
order of the ads

Move the nextAd object down top pixels from its current location.


function addEvent(object, evName, fnName, cap) {

if (object.attachEvent)
object.attachEvent("on" + evName, fnName);

else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);

// 1. Declare global variable "nextAd". Purpose of the variable is to reference
// the next banner add to be displayed in the Web page

var nextAd;

// 2. Use the addEvent() function to run the makeBannerAds() function when the
// page is loaded.

addEvent(window, "load", makeBannerAds, false);

/* 3. Create the makeBannerAds() function. The purpose of this function is to
create the box containing the banner ads. Add the following commands to the
a. Create the following html fragment:
<div id="bannerBox">

b. Loop through all of the items in the adsURL array, and for each item create
the html fragment:
<div class ="bannerAd">
<a href="url">
<img src="bannerindex" />
where "url" is the URL contained in the adURLs array and "index" is the
index number of the current ad. Set the z-index number of each banner ad
to the value of the counter index and append the banner ad to the bannerBox
element created in step a.

c. Append the bannerBox element to the document body

d. Run the changeBannerAd() function every 10 seconds.

function makeBannerAds() {

var bannerBox = document.createElement("div");
bannerBox.id = "bannerBox";

for (var i = 0; i < adsURL.length; i++) {
var bannerAd = document.createElement("div");
bannerAd.className = "bannerAd";
// bannerAd.id = adsURL[i];

var bannerLink= document.createElement("a");
// bannerLink.innerHTML = bannerBox.innerHTML;
// bannerLink.href = "#" + bannerBox.id;

var imgName = document.createElement("img");
imgName.src = "banner" + i +".jpg";

bannerAd.style.zIndex = i;

setInterval("changeBannerAd()", 10000);

/* 4. Create the changeBannerAd() function. Purpose of this function is to change
the ad currently displayed in the banner box. Add the following commands to the

a. Loop through all of the banner ads in the banner box. Locate the banner ad
with a z-index value equal to 0 and change the top position of that ad to
-50 pixels (moving it above the boundaries of the banner box). Set the
nextAd variable equal to this selected ad.

b. Loop through all of the banner ads again and decrease the z-index of each
ad by 1. If the new z-index value is less than 0, change it to one less than
the total number of banner ads.

c. Declare a variable named timeDelay, setting its initial value to 0. Purpose
of the timeDelay variable is to set the time delay in moving the position of
the new ad into the banner box.

d. Create a for loop with a counter variable that start with a value of -50 and
increases by 1 up to a value of 0. The counter variable is used to store the
top position of the banner ad as it moves back into the banner box. Each
time through the loop, run the moveNextAd() function after timeDelay
milliseconds with a parameter value equal to the value of the counter
variable. Increase the value of the timeDelay variable by 15 milliseconds
each time through the loop.

function changeBannerAd() {

var allAds = document.getElementById("bannerBox").childNodes;
for (var i = 0; i < allAds.length; i++) {
if (allAds[i].style.zIndex == 0) {
allAds[i].style.top = "-50px";
nextAd = allAds[i];

for ( var i = 0; i < allAds.length; i++) {

if(allAds[i].style.zIndex < 0) {
allAds[i].style.zIndex = allAds.length - 1;

var timeDelay = 0;
for (i = -50; i <= 0; i++) {
setTimeout("moveNextAd(" + i + ")", timeDelay);
timeDelay += 15;

/* 5. Create the moveNextAd() function. The function has a single parameter named
"top". Purpose of the function is to set the top position of the nextAd object.
Add a command to the function to set the top position of the nextAd to the
value of the top parameter.

function moveNextAd(top) {

nextAd.style.top = top + "px";