256
Chapter 4.5
<html>
<head>
<title>Top 5 CD Recommendations</title>
<link rel=”stylesheet” type=”text/css” href=”top5.css” />
</head>
<body>
<div id=”instructions”>
Click on a CD cover to add it to the Top 5 list.
If you want to start over, click the “Start Over”
button to clear the Top 5 list.
</div>
<div id=”cds”>
<img class=”cover” src=”images/vaughan_ood.jpg” />
<img class=”cover” src=”images/clapton_cream.jpg” />
<!-- Lots more images in here... -->
</div>
<div id=”top5-listings”>
<h2>My Top 5 CDs</h2>
<div id=”top5”></div>
</div>
<form>
<input type=”button” value=”Start Over” />
</form>
</body>
</html>
Now that clicking on a CD cover runs addToTop5(), it’s about time to
get that function working, isn’t it? When a CD is clicked, we need to move
that CD from the “cds” <div>, near the top of the screen, down to the
Top 5 listings. Thanks to the DOM, though, this should be a piece of cake.
Let’s start by looking at a bit of the DOM tree for top5.html.
Adding a CD to the top 5
div
form
img
img
img
img
img
div
body
div
This is the
“instructions”
<div>... we’re not
worried about it
right now.
This is the
<form> with
the “Start Over”
button in it.
This <div> contains a
heading, as well as...
...the “top5” <div>, where
the <img> of the clicked
on CD cover should go.
Whichever CD is clicked
on needs to move from
here...
...to her ...