Section 4a.14. Testing addToTop5()


4a.14. Testing addToTop5()

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?

Remember, there's no server involved here. All this code is running in your web browser, with no reloads and no page refreshes.

 Click Clicking on a CD cover moves the CD from the choices to the Top 5 listings. Click 

Code Magnets Solutions

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.

     function addToTop5() {       var imgElement = this; The <img> element that       was clicked on gets moved to the end of the top5Element's child list.       var top5Element = document.getElementById("top5");       top5Element.appendChild(imgElement) We use appendChild()       here because we always want the newest CD to appear at the end of the       "top5" <div>, after any other CDs already added.       imgElement. Once the CD is in the Top 5, it doesn't need       an event handler anymore.onclick = null Using null removes any other handlers for onclick,       so now the addToTop5() method won't run when the image is clicked on.     }     These are leftover magnets.that     addToTop5     insertBefore(imgElement)     top5-listings     top5Element     replaceNode(imgElement)     imgElement 


Hey, you forgot to show us something... where's the code that removes the CD from the top section when you put it down in the Top 5 listings?

An element can have only one parent

Take a close look at the code for addToTop5() so far. First, we get the <img> element for the CD cover, and then get a reference to the "top5" <div> . So far, no surprises, right?

Next, we take the <img>, and add it as a child of the "top5" <div>. At that point, the parent of the <img> is no longer the "cds" <div>... it's the "top5" <div>. And since elements have only one parent, it gets moved in the DOM tree:

 body div                 div img img imgHere's imgElement... img img div...and here's the "top5" <div>. top5Element.appendChild(imgElement); appendChild()  doesn't create a copy of imgElement... it actually changes the parent of the element to the "top5" <div>. body div The "cds" <div>. div The "top5" <div>. img   img   img   img  div img 

You don't have to actually remove the <img>... when you append it to the "top5" <div>, it simply disappears from the "cds" <div>.

I've been thinking about how we handle adding rankings to the CDs... but we don't keep up with how many CDs have been added to the Top 5. So I think that's what we need to do first. We can just count up the number of child elements named "img" in the "top5" <div>, right?

Exactly!

And now that you know how to loop through an element's child nodes and how to figure out an element's name, this should be pretty easy.

If you're feeling unsure about looping and checking an element's name, peek back at addOnClickHandlers() on page 254.

Let's add a new variable to our addToTop5() function and set it to the number of CDs in the top 5 listings:

 function addToTop5() {   var imgElement = this;   var top5Element = document.getElementById("top5");   var numCDs = 0; Here's the new variable. Start it out at 0.   for (var i=0; i<top5Element.childNodes.length; i++) {You need to check   each child element of the "top5" <div>.     if (top5Element.childNodes[i].nodeName.toLowerCase() == "img") { We loop through     the top5 <div>'s children, and only count up <img> elements... remember,     there could be text nodes with just spaces in them, so check each child to     see if it's an <img>.       numCDs = numCDs + 1; Just bump the counter up for each CD cover.     }   }   /* Code to move a CD into the Top 5 listings is here */ } 




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