Help with shopping cart in javascript
<p>Hey guys, 
(question edited)</p>

<p>What I am trying to achieve is this:
I want button where I can add my item to the shopping cart e.g AddToCart() so I can add my items with the number of quantities that the person will want. To do this I need global arrays like sum, quanitity and name. Except the way I have done it does not have this and I'm not sure how implement this.</p>

<p>The hint that was given to me is this: The price and name of each toy should be read directly from the web page using the DOM method call document.getElementByID(itemPriceID-or-itemNameID).innerHTML, where itempriceID  and itemNameID  are the id’s of the  HTML elements which display  the price and name of each toy.  (Note: the price (read directly from the page) will be of  type string, this needs to be converted to a number, so in order to perform type  you will need to use  the Javascript type conversion method parseFloat(price) )).</p>

<p>I then need a ViewShoppingCart() which will make a loop through the arrays and display it in a table with the total sum. 
What I have done is a bit similar but my knowledge and experience was not enough to accomplish the above problem. I hope this makes more sense.</p>

<p>javascript code</p>

<pre><code>  function round_total (c) {
          var pennies = c * 100;
          pennies = Math.round(pennies);
          var strPennies = "" + pennies;
          var len = strPennies.length;
          return parseFloat(strPennies.substring(0, len - 2) + "." + strPennies.substring(len - 2, len));
  }
  // End of round_total function.

  /* Start of generate_page function. */
  function generate_page (form) {
          tax = 0.08;
          delivery_p = 2.99;
          var odate = new Date();
          var qty = form.quantity.value;
          var product_v = new String(form.product.value);
          var total_price = product_v.substr(product_v.indexOf("$") + 1, product_v.length - product_v.indexOf("$"));
          var price_without_tax = round_total(qty * total_price);
          var ttax = round_total(price_without_tax * tax);
          var delivery = round_total(qty * delivery_p);
          var total_p = round_total(price_without_tax + ttax + delivery);
          document.writeln("Quantity: " + qty + "&lt;br&gt;");
          document.writeln("Price: $" + total_price + "&lt;br&gt;");
          document.writeln("Delivery: $" + delivery + "&lt;br&gt;");
          document.writeln("Total: $" + total_p + "&lt;br&gt;");
          document.writeln("Order placed on: " + odate.toGMTString());
  }
  function calculate() {
      round_total (c)();
      generate_page (form)();
  }
</code></pre>

<p>HTML code:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=utf-8"/&gt; 
&lt;script type="text/javascript" src="shopping_cart.js" /&gt;
&lt;/script&gt; 
&lt;link rel="stylesheet" type="text/css" href="shopping_cart.css" /&gt;
&lt;title&gt; A title &lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name="form1" method="post" action="data.php" &gt;
&lt;div id="product1"&gt;     
&lt;p id="title1"&gt;&lt;b&gt;Star Wars Tie Interceptor&lt;/b&gt;&lt;/p&gt;
&lt;img src="../Assingment Pics/Tie Interceptor.jpg" /&gt; &lt;p id="price1"&gt;Price £39.99&lt;/p&gt;     &lt;p&gt;&lt;b&gt;Qty&lt;/b&gt;&lt;/p&gt;
  &lt;select name="qty"&gt;
 &lt;option value="number"&gt;0&lt;/option&gt;
 &lt;option value="number"&gt;1&lt;/option&gt;
 &lt;option value="number"&gt;2&lt;/option&gt;
 &lt;option value="number"&gt;3&lt;/option&gt;
 &lt;option value="number"&gt;4&lt;/option&gt;
 &lt;option value="number"&gt;5&lt;/option&gt;
&lt;/select&gt; 
&lt;/div&gt;
&lt;div id="product2"&gt;
&lt;p id="title2"&gt;&lt;b&gt;Star Wars Clone Wars Vehicles Corporate Allinace Tank&lt;/b&gt;&lt;/p&gt;
&lt;img src="../Assingment Pics/Corporate Tank.jpg" /&gt;&lt;p id="price2"&gt;Price £29.99&lt;/p&gt; &lt;b&gt;        Qty&lt;/b&gt;
&lt;select name="qty2"&gt;
&lt;option value="number"&gt;0&lt;/option&gt;
&lt;option value="number"&gt;1&lt;/option&gt;
&lt;option value="number"&gt;2&lt;/option&gt;
&lt;option value="number"&gt;3&lt;/option&gt;
&lt;option value="number"&gt;4&lt;/option&gt;
&lt;option value="number"&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;div id="product3"&gt;
&lt;p id="title3"&gt;&lt;b&gt;Star Wars Clone Wars AT-ST vehicle&lt;/b&gt;&lt;/p&gt;
&lt;img src="../Assingment Pics/At St.jpg" /&gt;&lt;p id="price3"&gt;price £49.99&lt;/p&gt; &lt;b&gt;Qty&lt;/b&gt;
&lt;select name="qty3"&gt;
&lt;option value="number"&gt;0&lt;/option&gt;
&lt;option value="number"&gt;1&lt;/option&gt;
&lt;option value="number"&gt;2&lt;/option&gt;
&lt;option value="number"&gt;3&lt;/option&gt;
&lt;option value="number"&gt;4&lt;/option&gt;
&lt;option value="number"&gt;5&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt; 
&lt;br /&gt;
&lt;input type="submit" value="Add to cart" name="submit" onClick="cart()";/&gt;&lt;input
,    type="reset" value="Reset" name="reset"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Do I need to show my CSS as well?
(Sorry about the coding its not working properly for me, its not showing up the way it should be)</p>
