Получение <div> для отображения в теге заголовка

Question

Ниже приведен вопрос для задания.

Назначение: чтобы создать это приложение, вы добавите рекламный блок для баннера, расположенный в правом верхнем углу веб-страницы. Реклама будет располагаться друг над другом с различным значением z-index. Чтобы отобразить другое объявление, ваша программа изменит номера z-index, перенеся нижнюю часть в верхнюю часть стопки. Чтобы сделать приложение визуально интересным, Хеллен хочет, чтобы новое объявление прокручивалось сверху вниз, смещая текущее отображаемое объявление.

Мой вопрос: не удалось отобразить баннер в правом верхнем углу веб-страницы.

/*
   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

Я нашел несколько ошибок в вашем коде. Вам нужно использовать

document.body.appendChild(bannerBox);

вместо

document.appendChild(bannerBox);

Я выполнил ваш код после внесения этого исправления http://jsbin.com/zavoyuyife/1/edit и элемент bannerBox был добавлен в тело. Вы можете увидеть это в Firebug (firefox) или в Chrome. Чтобы это выглядело визуально, вам нужно указать правильную высоту и ширину для класса bannerAd. В вашем коде, поскольку вы не упомянули CSS, он не отображался визуально на странице, когда я запускал его в JSBin.

В методе makeBannerAds вы создаете элемент anchor и img, но не добавляете его в элемент bannerAd.

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";

Надеюсь это поможет.