Hey guys, (question edited)
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.
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) )).
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.
javascript 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 + "<br>");
document.writeln("Price: $" + total_price + "<br>");
document.writeln("Delivery: $" + delivery + "<br>");
document.writeln("Total: $" + total_p + "<br>");
document.writeln("Order placed on: " + odate.toGMTString());
}
function calculate() {
round_total (c)();
generate_page (form)();
}
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="shopping_cart.js" />
</script>
<link rel="stylesheet" type="text/css" href="shopping_cart.css" />
<title> A title </title>
</head>
<body>
<form name="form1" method="post" action="data.php" >
<div id="product1">
<p id="title1"><b>Star Wars Tie Interceptor</b></p>
<img src="../Assingment Pics/Tie Interceptor.jpg" /> <p id="price1">Price £39.99</p> <p><b>Qty</b></p>
<select name="qty">
<option value="number">0</option>
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
</select>
</div>
<div id="product2">
<p id="title2"><b>Star Wars Clone Wars Vehicles Corporate Allinace Tank</b></p>
<img src="../Assingment Pics/Corporate Tank.jpg" /><p id="price2">Price £29.99</p> <b> Qty</b>
<select name="qty2">
<option value="number">0</option>
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
</select>
</div>
<div id="product3">
<p id="title3"><b>Star Wars Clone Wars AT-ST vehicle</b></p>
<img src="../Assingment Pics/At St.jpg" /><p id="price3">price £49.99</p> <b>Qty</b>
<select name="qty3">
<option value="number">0</option>
<option value="number">1</option>
<option value="number">2</option>
<option value="number">3</option>
<option value="number">4</option>
<option value="number">5</option>
</select>
</div>
<br />
<input type="submit" value="Add to cart" name="submit" onClick="cart()";/><input
, type="reset" value="Reset" name="reset">
</form>
</body>
</html>
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)