Getting <div> to be displyed in the heading tag

Question

Listed below is the question for the assignment.

Assignment: To create this application you'll add a banner ad box located in the upper-right conner of the Web page The ads will be stacked on top of each other with different z-index value. To display a different ad, your program will change the z-index numbers, bringing the bottom to the top of the stack. To make the application visually interesting Hellen wants the new ad to scroll down from the top, displacing the current displayed ad.

My Question: Not able to get the banner to show up on the upper right corner of the webpage.

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

   Author:
   Date:
   
   Filename: banners.js


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


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

   makeBannerAds()
      Create the banner box and stacked collection of banner ads

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

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

*/


//this is the global scope here when you declare out side of a function it because global or at the top of the js file
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);
}

/* Add new code below */

var nextAd;

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

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

  for (var i = 0; i < num; i++) {
    var bannerAd = document.createElement("div");
    bannerAd.className = "bannerAd";
    bannerAd.style.zIndex = i;
    var urlLink = document.createElement("a");
    urlLink.href = adsURL[i];
    var bannerIndex = document.createElement("img");
    bannerIndex.src = "banner" + i + ".jpg";
    bannerBox.appendChild(bannerAd);
  }
  document.body.appendChild(bannerBox);
  setInterval("changeBannerAd()", 10000);
}

function changeBannerAd() {
  var allAds = document.getElementsByTagName('body')[0].appendChild(bannerBox);

  for (var i = 0; i < num; i++) {
    if (allAds[i].style.zIndex === 0) {
      allAds[i].style.top = "-50px";
      nextAd = allAds[i];
    }
  }

  for (var i = 0; i < num; i++) {
    allAds[i].style.zIndex--;

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

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

function moveNextAd(top) {
  nextAd.style.top = top + ".px";
}


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

   Author:
   Date:

   Filename: ads.js


   Global Variables:
  
   adURLs
      An array of URL for banner ads


*/

var num = 11;
var adsURL = new Array(num);

for (var i = 0; i < adsURL.length; i++) {
  adsURL[i] = "testpage" + i + ".htm";
}

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 8
   Case Problem 1
   Filename: bannerstyles.css

   This file contains styles used for the rotating ad banners
*/

#bannerBox {
  position: absolute;
  top: 15px;
  left: 470px;
  z-index: 10;
  width: 300px;
  height: 60px;
  overflow: hidden
}
.bannerAd {
  position: absolute;
  width: 300px;
  height: 60px;
  top: 0px;
  left: 0px
}
.bannerAd img {
  border-width: 0px width: 300px;
  height: 60px;
}
/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 8
   Case Problem 1
   Filename: bw.css

   This file contains styles used in the books.htm file.

*/

* {
  padding: 0px;
  margin: 0px
}
body {
  font-size: 12px;
  font-family: 'Trebuchet MS', Arial, Verdana, sans-serif;
  background: white url(leftbar.jpg) repeat-y
}
a {
  display: block;
  text-decoration: none
}
ul {
  list-style-type: none
}
label {
  display: block
}
fieldset {
  border-width: 0px
}
#page {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 750px
}
#heading {
  width: 100%;
  text-align: left;
  border-bottom: 1px solid rgb(102, 51, 0);
  margin: 0px;
  padding: 0px;
  background-color: white
}
#menu {
  width: 100%;
  margin: 0px;
  padding: 0px
}
#menu li {
  width: 14%;
  text-align: center;
  height: 20px;
  float: left
}
#menu li a {
  color: rgb(102, 51, 0);
  background-color: white;
  border: 1px solid rgb(102, 51, 0)
}
#menu li a:hover {
  color: rgb(255, 255, 153);
  background-color: rgb(102, 51, 0)
}
#menu2 {
  clear: left;
  float: left;
  width: 200px;
  padding-top: 10px;
  margin: 0px 30px 0px 20px
}
#menu2 li {
  width: 95%;
  text-align: left;
  margin-bottom: 3px
}
#menu2 li a {
  width: 100%;
  color: black
}
#menu2 li a:hover {
  text-decoration: underline;
  color: rgb(255, 255, 153)
}
#menu2 .newgroup {
  margin-top: 20px
}
#main {
  float: left;
  width: 450px
}
#main a {
  display: inline;
  text-decoration: underline;
  color: rgb(116, 95, 88)
}
#main h2 {
  font-size: 20px;
  color: rgb(102, 51, 0);
  margin-top: 10px;
  font-weight: normal;
  letter-spacing: 5px
}
#main p {
  margin: 10px 0px 10px 20px
}
#signature {
  text-align: right;
  line-height: 0.8
}

<?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>
  <!-- 
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 8
   Case Problem 1

   Online Bookworms Home Page
   Author:
   Date:          

   Filename:         books.htm
   Supporting files: ads.js, banner0.jpg - banner10.jpg, banners.js, 
                     bannerstyles.css, bw.css, bwlogo.jpg,
                     signature.jpg, testpage0.htm - testpage10.htm
-->
  <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="banner.js" type="text/javascript"></script>


  <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>
    <!--calls the external file called slideshow.js -->
    <script src="banners.js" type="text/javascript"></script>
    <!--calls the external file called slideshow.js -->




  </head>

  <body>
    <div id="page">
      <h1 id="heading"><img src="bwlogo.jpg" alt="Online Bookworms" />
   
   <script type="text/javascript>
   storeURL();
   </script>
   
   </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> &mdash; 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>

Answer 1

I found a few mistakes in your code. You need to use

document.body.appendChild(bannerBox);

instead of

document.appendChild(bannerBox);

I ran your code after making this correction http://jsbin.com/zavoyuyife/1/edit and the bannerBox element got added to the body. You can see it in Firebug (firefox) or Chrome inspector. To make it visually appear you need to give proper height and width to the bannerAd class. In your code since you have not mentioned the CSS, it did not appear visually on the page when I ran it in JSBin.

In the makeBannerAds method, you are creating the anchor and img element but not adding to the bannerAd element.

bannerAd.className = "bannerAd";
bannerAd.style.zIndex = i;
var urlLink = document.createElement("a");
urlLink.href = adsURL[i];
var bannerIndex = document.createElement("img");
bannerIndex.src = "banner" + i + ".jpg";

Hope this helps.