使用javascript显示简单的购物车（提价*数量）？

Question

I have an open-book assignment I have to do regarding shopping carts via javascript and I can't seem to figure it out. First, my HTML code looks like this:

<div id="wrapper">
<h1> Magasin de musique </h1>
<form id="musictems" name="musicitems">

 <!--Enveloppe magasin - storewrapper -->
<div id="storewrapper">
 <div class="collections">
    <h2>Collections de musique </h2>
   <table>
    <tr>
            <th></th>
            <th>Nom</th>
            <th class="lrpadding">Prix</th>
            <th>Quantit&eacute;</th>
     </tr>
     <tr>
            <td><input type="checkbox" value="135.50" name="collectioncheckboxes"/></td>
            <td>Collection 1</td>
            <td class="lrpadding">$135.50</td>
            <td><input type="text" name="c1qty" size="4"></td>
     </tr>
     <tr>
            <td><input type="checkbox" value="129.99" name="collectioncheckboxes"/></td>
            <td>Collection 2</td>
            <td class="lrpadding">$129.99</td>
            <td><input type="text" name="c2qty" size="4"></td>
     </tr>
     <tr>
            <td><input type="checkbox" value="145.99" name="collectioncheckboxes"/></td>
            <td>Collection 3</td>
            <td class="lrpadding">$145.99</td>
            <td><input type="text" name="c3qty" size="4"></td>
     </tr>
   </table>              
 </div>

So the value is in the HTML itself. Now basically there's a button that when clicked runs a javascript function that I must code to display whatever items are checked, and multiplies the value of the checked items by the quantity (named c1qty/c2qty/etc).

How can I do that without modifying the html? Any help or tips much appreciated!

Answer 1

Your function should use the DOM to grab the appropriate data from the HTML and then perform the multiplication operation upon it. After this is done, you can use the innerHTML function to change the "text" values.

For an example/tutorial of changing values, see http://www.w3schools.com/js/js_htmldom_html.asp

EDIT: You could use the getElementsByClassName("lrpadding") method to pull down a list of all the tags of the specified class, and then iterate through the pertinent ones using the innerHTML property to read and then modify the prices based upon your multiplier. http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

You could use the getElementsByName("collectioncheckboxes") to create a collection of all the checkboxes in the document and then iterate through them using the isChecked property to see if the particular box is checked.