This is my first post here, so I hope I've done this right.
This is for a school assignment, so please just give me a hint or suggestion as to where I've gone wrong.
I'm supposed to be creating a scrolling banner ad at the top of the page, and the ads are to change every 10 seconds.
The first ad is showing up, but the ads are not changing with the code I'm using, and I'm getting an error in the moveNextAd function in the banners.js file. "Cannot read property style of undefined".
So I'm thinking I may have incorrectly assigned the next ad to the nextAd variable? I've been staring at this and attempting to tweak it for 3 days, I'm stumped.
If I haven't given enough info, let me know and I will explain further. My most heartfelt thanks for any help you can offer!!
The banner ad images are named banner0.jpg through banner10.jpg and the ad links are named testpage0.htm through testpage10.htm.
Here is the books.htm file:
Code:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Online Bookworms</title>
<link href="bw.css" rel="stylesheet" type="text/css" />
<link href="bannerstyles.css" rel="stylesheet" type="text/css" />
<script src="ads.js" type="text/javascript"></script>
<script src="banners.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
<h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" /></h1>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Reviews</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Book Swaps</a></li>
<li><a href="#">OBW Store</a></li>
<li><a href="#">Author's Corner</a></li>
<li><a href="#">My Account</a></li>
</ul>
<ul id="menu2">
<li><a href="#">My Reading List</a></li>
<li><a href="#">Review a Book</a></li>
<li><a href="#">Join a Discussion</a></li>
<li><a href="#">Post to a Forum</a></li>
<li><a href="#">My Mail</a></li>
<li><a href="#">My Posts</a></li>
<li class="newgroup"><a href="#">Reading Recommendations</a></li>
<li><a href="#">Books of the Month</a></li>
<li class="newgroup"><a href="#">MP3 Downloads</a></li>
<li><a href="#">Podcast</a></li>
<li><a href="#">RSS Feeds</a></li>
<li class="newgroup"><a href="#">Tech Support</a></li>
<li><a href="#">Comments</a></li>
<li><a href="#">About online BookWorms</a></li>
</ul>
<div id="main">
<h2>Welcome</h2>
<p>Welcome to <strong>online BookWorms</strong> — your location on
the Web for books, magazines, short stories, poetry, and essays.
Please explore our online bookstore for the lowest prices on new
and rare books. Share your love of reading by joining one of our
many forums and discussion groups. Are you an aspiring critic?
We welcome book reviews and essays on your favorite authors and
works.
</p>
<h2>News</h2>
<p>We are very happy to introduce the <a href="#">online BookWorms
Podcast</a>. The podcast will contain free excerpts from great
works of fiction and reviews of current books. You can quickly
subscribe to this new BookWorms feature <a href="#">here</a>.
</p>
<p>Take a few moments now to explore our book shelves. And remember to
patronize our sponsors by clicking the banner ads at the top of the
page. Enjoy browsing our site!
<p id="signature">
<img src="signature.jpg" alt="Helen Ungerstatz" />
</p>
</div>
</div>
</body>
</html>
Here is the ads.js file:
Code:
var adsURL = new Array();
for (var i = 0; i < 11; i++) {
adsURL[i] = "testpage" + i + ".htm";
}
and here is the banners.js file:
Code:
var nextAd;
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
addEvent(window, "load", makeBannerAds, false);
function makeBannerAds() {
var bannerBox = document.createElement("div");
bannerBox.id = "bannerBox";
for (var i = 0; i < adsURL.length; i++) {
bannerAd = document.createElement("div");
bannerAd.className = "bannerAd";
bannerAd.style.zIndex = i;
var adLink = document.createElement("a");
adLink.href = adsURL[i];
bannerBox.appendChild(adLink);
var adImg = document.createElement("img");
adImg.src = "banner" + i + ".jpg";
adLink.appendChild(adImg);
}
document.body.appendChild(bannerBox);
setInterval(changeBannerAd(), 10000);
}
function changeBannerAd() {
// alert("changing banner ad");
var adArray = document.getElementsByClassName("bannerAd");
var timeDelay = 0;
for (var i = 0; i < adArray.length; i++) {
if (adArray[i].zIndex == 0) {
adArray[i].style.top = "-50px";
nextAd = adArray[i];
}
}
for (var i = 0; i < adArray.length; i++) {
adArray[i].zIndex--;
if (adArray[i].zIndex < 0) {
adArray[i].zIndex = adArray.length - 1;
}
}
for (var i = -50; i <= 0; i++) {
setInterval("moveNextAd(" + i + ")", timeDelay);
timeDelay += 15;
}
}
function moveNextAd(top) {
nextAd.style.top = top + "px";
}
Before you post, read our: 
Need help with a scrolling ad banner, please
