Section 4a.13. Back to event handlers


4a.13. Back to event handlers

You're almost ready to write the code for addToTop5()... but there's one more detail you need to think about. Once you've moved the CD cover image down into the "top5" <div>, you've got to remove the event handler that runs addToTop5() when the cover is clicked on.

addToTop5() will move the CD cover image from the top "cds" <div> to the lower "top5" <div>.

Once the CD is in the Top 5 listings...

...we don't want addToTop5() to run when the cover is clicked on.

 addToTop5()addToTop5() should only run when a CD in the "cds" <div> is clicked... but not when a CD already in the "top5" <div> is clicked. 

4a.13.1. Remember how we added the event handler?

     function addOnClickHandlers() {       var cdsDiv = document.getElementById("cds");       var cdImages = cdsDiv.getElementsByTagName("img");       for (var i=0; i<cdImages.length; i++) {          cdImages[i]This is the <img> element       for the CD cover....onclick...and this is the event       handler name. = addToTop5;Here's the event handler       to run. You can remove this event handler by setting the handler property to null.       }     } 

Code Magnets

You've learned a lot these last few pages, and now it's time to put all your new DOM and JavaScript tricks into action. Go ahead and finish off the addToTop5() function by pinning the code magnets into the blanks below. Be carefulyou might not need all the code magnets.

     function addToTop5() {       var imgElement = ___________;       var top5Element = document.getElementById(___________);       top5Element.__________________________;Here's where you add the <img>       element to the "top5" <div>, using one of the methods you saw on the last page.       imgElement._____________ =You need to remove the event handler from the       CD cover once it's in the Top 5 listings. ________;     } 

     appendChild(imgElement)     that     onclick     this     insertBefore(imgElement)     addToTop5     "Top5"     imgElement     top5Element     replaceNode(imgElement)     top5-listings     nullRemember, null means "no value", or "remove any current value." 





Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net