Head Rush Ajax

you’re on your way 4

263

developing dom apps

Be sure you’ve completed the Code Magnets exercise, and check your answers with ours

on page 264. Make these changes to top5.js, and then load up top5.html into

your web browser. Can you click on the CD covers? What happens when you do?

Testing addToTop5()

Clicking on a CD

cover moves the CD

from the choices to

the Top 5 listings.

Click

Click

Remember, there’s no server

involved here. All this code is

running in your web browser, with

no reloads and no page refreshes.

264

Chapter 4.5

function addToTop5() {

var imgElement = ___________;

var top5Element = document.getElementById(___________);

top5Element.__________________________;

imgElement._____________ = ________;

}

Did you have any trouble with the Top 5 CDs test drive? If you

did, make sure you put the code magnets in the right blanks,

and update your JavaScript code to match.

this

that

“top5”

onclick

addToTop5

top5Element

top5-listings

imgElement

These are leftover magnets.

Using null removes any other

handlers for onclick, so now the

addToTop5() method won’t run

when the image is clicked on.

Once the CD is in the

Top 5, it doesn’t need an

event handler anymore.

The <img> element that was clicked on gets moved

to the end of the top5Element’s child list.

Code

Magnets

Solutions

null

nshing addToTop5()

append ...