Section 4a.5. Setting up the CD covers

4a.5. Setting up the CD covers

Any time someone clicks on a CD cover image, we need the Top 5 page to run our addToTop5() function. That wayonce we write the code for addToTop5()the CD that was clicked on will get added to the Top 5 list.

There are two different ways we can handle this:

Option 1: Add onClick event handlers to every <img> element in top5.html.

Pros: Easy to do. Just add to each <img> element in the HTML.

Doesnt require writing any JavaScript.

Cons: If you change or add images to the HTML page, you have to remember to add the onClick event handler.

Option 2: Use JavaScript to programmatically add event handlers to all <img> elements.

Pros: Makes sure all images call The application can call the function that adds event handlers any time its needed.

Cons: Requires writing code instead of adding onClick handlers directly to the HTML.

BRAIN POWER

Which option do you think is best? Remember, after you add a CD to the Top 5 listings, you don't want anything to happen if someone clicks on that cover again. Otherwise, you'd be adding a CD to the Top 5 that is already in the Top 5. Does this make a difference in how you add the onClick event to the CD cover <img> elements?

4a.5.1. Option 1: Add onClick event handlers to every <img> element in top5.html.

     Here's top5..html, with onClick() handlers set up to run addToTop5()     when a CD cover image is clicked.     <img          src="/books/2/850/1/html/2/images/shepherd_ledbetter.jpg"         alt="Ledbetter Heights"         onClick="addToTop5();" />     <img          src="/books/2/850/1/html/2/images/johnson_complete.jpg"         alt="The Complete Recordings"     onClick="addToTop5();" /> Every time you     click this CD cover, addToTop5() will run.     <img  

When the CD is clicked, addToTop5() will use the DOM to move the cover down to the Top 5 listings at the bottom of the page.

Now the CD is in the right place... but it still has the onClick event handler! If someone clicks on the CD cover again, there are going to be some problems...

We better take a look at Option 2...

4a.5.2. Option 2: Use JavaScript to programmatically add event handlers to all <img> elements.

     This time, there's nothing in the HTML that sets up an event handler     for the CD covers.     <img          src="/books/2/850/1/html/2/images/shepherd_ledbetter.jpg"         alt="Ledbetter Heights"         onClick="addToTop5();" />     <img          src="/books/2/850/1/html/2/images/johnson_complete.jpg"         alt="The Complete Recordings"         onClick="addToTop5();" />     <img  

Here's part of the DOM for the Top 5 web page. This is the "cds" <div>...

                 div        img  img  img  img  img ...and here are        all the CD covers, represented as <img> elements. 

Using JavaScript, we need to set up each <img> element to run addToTop5() when the <img> is clicked on.

NEED ARROWS

 top5.js            function addToTop5() {            // Add a CD to the Top 5 list           }           function startOver() {            // Remove all CDs from the Top 5 and start over           } 

I think we should use JavaScript. When we add a CD to the Top 5 listing, we need to remove the event handler on that <img> element... but then if the user clicks "Start Over", we need to move the image back to the "cds" <div>, and then add the handler back. Seems like it would be easier to just handle adding and removing the onClick event with JavaScript.

Nice thinking! We can write a function that adds the onClick event handler to all the <img> elements in the "cds" div. If the CD is added to the Top 5 list, we'll remove the handler, and move the <img> down to the "top5" div.

But if "Start Over" is clicked, we need to put all the CDs back in the top <div>, the one named "cds". Then we can run our function again, and add the handlers back to all these images.

When the app starts, all of these <img> elements need to call addToTop5() when they're clicked on...

...but once a CD is added to the Top 5 listing, the event handler should be removed. We don't want these added twice.

If someone clicks "Start Over", all the CDs go back up top, and need to call addToTop5() if they're clicked on again.