4a.8. Adding a CD to the top 5Now 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. <html> <head> <title>Top 5 CD Recommendations</title> <link rel="stylesheet" type="text/css" href="top5.css " /> </head> <body> <div > 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 > <img src="/books/2/850/1/html/2/images/vaughan_flood.jpg" /> <img src="/books/2/850/1/html/2/images/clapton_cream.jpg" /> <!-- Lots more images in here... --> </div> <div > <h2>My Top 5 CDs</h2> <div ></div> </div> <form> <input type="button" value="Start Over" /> </form> </body> </html> Here's top5.html, from back on page 246. The browser takes this HTML, and turns it into this DOM tree. body This is the "instructions" <div>... we're not worried about it right now. div divThis is the "cds" <div>, and is where the 12 CD cover images start out. divThis <div> contains a heading, as well as...formThis is the <form> with the "Start Over" button in it. There are actually 12 <img> elements in top5.html. img img imgWhichever CD is clicked on needs to move from here... img img h2 div ...to here. ...the "top5" <div>, where the <img> of the clicked on CD cover should go. |