幫助與JavaScript的購物車

我想實現的是：我想按鈕，我可以在我的項目添加到購物車如AddToCart（），所以我可以加我的項目與該人希望的數量。爲此，我需要全局數組，如總和，量化和名稱。除了我已經做的方式沒有這個，我不知道如何實現這一點。

提示給我的提示是：每個玩具的價格和名稱應該使用DOM方法調用document.getElementByID（itemPriceID-itemNameID）.innerHTML從網頁直接讀取，其中itempriceID和itemNameID是顯示每個玩具的價格和名稱的HTML元素的ID。（注意：價格（直接從頁面讀取）將是字符串類型，這需要轉換爲數字，因此爲了執行類型，您將需要使用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呢？（對不起，關於編碼它不適合我的工作，它沒有顯示出它應該的方式）

來源

2010-05-03 user228390

你犯的一個明顯的錯誤是，你已經把按鈕放在標籤之外，這使得它們什麼都不做。首先解決該問題。

在javascript部分，我並不真正瞭解你想達到的目標。我在提交按鈕中看到'onClick ='cart（）''，但是這個函數似乎是不存在的？要麼你應該把輸入按鈕放在表單域中，然後它會加載data.php（正如我在第一段中所建議的那樣），或者你可以使用cart（）函數來讀取值並使用AJAX發送值無需加載新頁面（如果我理解正確，您似乎需要）。

請解釋清楚你想要什麼，然後才能正確回答。

來源

2010-05-04 09:50:27 Pino

好的我認爲我已經修復了第一部分。我是新來的，但我不認爲我需要AJAX？它應該是純粹的JavaScript。我編輯了我的原始問題以更好地解釋它。 – user228390 2010-05-04 15:52:44

我想我現在明白了。基本上你應該計算點擊提交時啓動的「cart（）」函數，從頁面收集信息，計算總價並在某處顯示。那麼你將不需要AJAX。您目前創建HTML頁面的方式並不容易從DOM中檢索所需的信息。使用獨特的ID可以使產品和價格最簡單，從而可以通過購物車功能輕鬆檢查產品和價格。使用選擇框也可以工作，但至少給他們一個ID。 – Pino 2010-05-04 16:26:16

好吧我已經將HTML更改爲更簡單的東西，這是你的意思嗎？但我仍然需要關於javascript的幫助 – user228390 2010-05-04 17:12:03

好了，現在你可以這樣做

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

有可能在此代碼中的錯誤，我真的沒有測試它，但它應該填補這些陣列的產品的價值，你有。然後接下來你應該把數量轉換成整數，價格變成浮動，並做你計劃做的計算。所以總價格將是產品價格[1] +產品價格[2] +產品價格[3]。這段代碼仍然需要編輯才能真正起作用，並且可能有更智能的方式讓你到達那裏，但這應該是一個開始。

來源

2010-05-04 19:36:12 Pino

幫助與JavaScript的購物車

回答

相關問題