帮助使用JavaScript的购物车

Question

（问题已编辑）

我要达到的目的是：我想要一个按钮，可以在其中将我的商品添加到购物车中，例如AddToCart（），这样我就可以添加该商品以及该人想要的数量。 为此，我需要全局数组，例如sum，quanitity和name。 除了我做的方式，它没有这个，而且我不确定如何实现。

给我的提示是：应该使用DOM方法调用document.getElementByID（itemPriceID-或-itemNameID）.innerHTML从Web页面直接读取每个玩具的价格和名称，其中itempriceID和itemNameID是ID的显示每个玩具的价格和名称的HTML元素。（注意：价格（直接从页面读取）将是字符串类型，需要将其转换为数字，因此，要执行类型，您将需要使用Javascript类型转换方法parseFloat（price）））。

然后，我需要一个ViewShoppingCart（），它将遍历数组并将其显示在具有总和的表中。 我所做的有点相似，但是我的知识和经验不足以解决上述问题。 我希望这更有意义。

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代码：

<!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>

我还需要显示CSS吗？ （很抱歉，编码对我来说无法正常工作，无法显示应有的方式）

Answer 1

好吧，现在您可以做类似的事情

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;
    }
  }

这段代码中可能有错误，我没有真正测试过，但是应该用您拥有的产品的值填充这些数组。 接下来，您应该将数量转换为整数，价格转换为浮动价格，并进行您打算进行的计算。 因此，总价格将为productprice [1] + productprice [2] + productprice [3]。 这段代码仍然需要进行编辑才能真正起作用，并且可能会有更聪明的方法将您带到那里，但这应该是一个开始。

Answer 2

您犯的一个明显的错误是您已将按钮放置在标签外部，这使它们什么也不做。 首先解决。

在javascript方面，我不太了解您要达到的目标。 我在“提交”按钮中看到“ onClick =“ cart（）”“，但是此功能似乎不存在吗？ 您应该将输入按钮放在form字段内，然后它将加载data.php（如我在第一段中建议的那样），或者您可以使用cart（）函数读取值并使用AJAX发送值而无需加载一个新页面（如果我理解正确的话，您似乎想要这样）。

在可以正确回答之前，请更好地解释您想要什么。

帮助使用JavaScript的购物车

问题描述

2 个解决方案

解决方案1
2 2010-05-04 19:36:12

解决方案2
0 2010-05-04 09:50:27

帮助使用JavaScript的购物车

问题描述

2 个解决方案

解决方案1 2 2010-05-04 19:36:12

解决方案2 0 2010-05-04 09:50:27

解决方案1
2 2010-05-04 19:36:12

解决方案2
0 2010-05-04 09:50:27