Head Rush Ajax

you’re on your way 4

261

developing dom apps

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.

Back to event handlers

...we don’t want

addToTop5() to run when

the cover is clicked on.

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.

addToTop5()

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].onclick = addToTop5;

}

}

This is the <img> element

for the CD cover...

...and this is the event

handler name.

Once the CD is in the

Top 5 listings...

addToTop5() will move

the CD cover image from

the top “cds” <div> to

the lower “top5” <div>.

Here’s the event handler

to run. You can remove

this event handler by

setting the handler

property to null.

262

what’s the goal

Chapter 4.5

appendChild(imgElement)

function addToTop5() {

var imgElement = ___________;

var top5Element = document.getElementById(___________);

top5Element.___________________________ ...