Section 4a.18. Testing the CD rankings (again)

4a.18. Testing the CD rankings (again)

Once you've finished up addToTop5 in your JavaScript, fire up your web browser again. Load the Top 5 web page, and click on some CD covers. You should see rankings show up, overlaid on the top left corner of each CD cover. The absolute positioning in CSS makes sure these appear on top of the cover, adding a nice visual bit of eye candy to the page.

 Click Click Click 

Now the CDs in the Top 5 listings have rankings... thanks to the magic of JavaScript, the DOM, and a little CSS.

Just Do It

It's time to exercise your DOM skills one more time. The startOver() function needs to do several things:

1. Run through each of the children of the "top5" <div>.

2. Any CD cover images need to be added back to the top of the page.

3. And other elements, like <span>s, need to be removed from the page.

See if you can fill in the blanks, and finish off the JavaScript in top5.js.

 function startOver() {   var top5Element = document._____________("top5");   var cdsElement = document.getElementById("______");   while (_______________.hasChildNodes()) {     var firstChild = top5Element.______________;     if (firstChild._____________.toLowerCase() == "img") {       ____________.appendChild(firstChild);     } else {       top5Element.removeChild(________________);     }   }   ____________________;This one is a little tricky. Remember, once all the CD   covers are back up top, you should be able to click on them and have addToTop5() get   called. Maybe there's a function that does that? } 

Now you just need to update top5.html, and set the "Start Over" button to call your completed startOver() function:

     <form><p>       <input type="button" value="Start Over" onClick  ="startOver();" />Always      remember to connect your HTML buttons and elements to your JavaScript code.     </p></form>