幫助使用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