帮助使用JavaScript的购物车
[英]Help with shopping cart in javascript
问题描述
(question edited) 
（问题已编辑）
What I am trying to achieve is this: I want button where I can add my item to the shopping cart eg AddToCart() so I can add my items with the number of quantities that the person will want. 我要达到的目的是：我想要一个按钮，可以在其中将我的商品添加到购物车中，例如AddToCart（），这样我就可以添加该商品以及该人想要的数量。 To do this I need global arrays like sum, quanitity and name. 为此，我需要全局数组，例如sum，quanitity和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. 给我的提示是：应该使用DOM方法调用document.getElementByID（itemPriceID-或-itemNameID）.innerHTML从Web页面直接读取每个玩具的价格和名称，其中itempriceID和itemNameID是ID的显示每个玩具的价格和名称的HTML元素。 (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) )). （注意：价格（直接从页面读取）将是字符串类型，需要将其转换为数字，因此，要执行类型，您将需要使用Javascript类型转换方法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. 然后，我需要一个ViewShoppingCart（），它将遍历数组并将其显示在具有总和的表中。 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 JavaScript代码
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: HTML代码：
<!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? 我还需要显示CSS吗？ (Sorry about the coding its not working properly for me, its not showing up the way it should be) （很抱歉，编码对我来说无法正常工作，无法显示应有的方式）
2 个解决方案
解决方案1
2 2010-05-04 19:36:12
Okay, so now you can do something like 好吧，现在您可以做类似的事情
var productname = new array();
var productprice = new array();
var productquantity = new array();
function cart()
{
for (i=1;i<=3;i++)
{
var name = 'title'+i;
var price = 'price'+i;
var quantity = 'qty'+i;
productname[i] = document.getElementById(name).innerHTML;
productprice[i] = document.getElementById(price).innerHTML;
var selectfield = document.getElementById(quantity).
productquantity[i] = selectfield.options[selectfield.selectedIndex].text;
}
}
there might be an error in this code, I didn't really test it, but it should fill these arrays with the values of the products you have. 这段代码中可能有错误，我没有真正测试过，但是应该用您拥有的产品的值填充这些数组。 Then next on you should turn quantity into integer, price into float and do the calculations you plan to do. 接下来，您应该将数量转换为整数，价格转换为浮动价格，并进行您打算进行的计算。 So total price would be productprice[1] + productprice[2] + productprice[3]. 因此，总价格将为productprice [1] + productprice [2] + productprice [3]。 This code still needs editing to actually work, and there might be a smarter way to get you there, but this should make for a start. 这段代码仍然需要进行编辑才能真正起作用，并且可能会有更聪明的方法将您带到那里，但这应该是一个开始。
解决方案2
0 2010-05-04 09:50:27
The obvious mistake you have made is that you have placed the buttons outside the tags, which makes them do nothing. 您犯的一个明显的错误是您已将按钮放置在标签外部，这使它们什么也不做。 First fix that. 首先解决。
On the javascript part, I don't really understand what you are trying to achieve. 在javascript方面，我不太了解您要达到的目标。 I see 'onClick="cart()"' in the submit button, but this function seems to be non-existant? 我在“提交”按钮中看到“ onClick =“ cart（）”“，但是此功能似乎不存在吗？ Either you should put the input buttons inside the form field, then it will load data.php (as I suggested in the frist paragraph), or you could use the cart() function to read the values and use AJAX to send the values without loading a new page (which you seem to want if I understand correctly). 您应该将输入按钮放在form字段内，然后它将加载data.php（如我在第一段中建议的那样），或者您可以使用cart（）函数读取值并使用AJAX发送值而无需加载一个新页面（如果我理解正确的话，您似乎想要这样）。
Please explain better what you want, before this can be properly answered. 在可以正确回答之前，请更好地解释您想要什么。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.