[英]Calculate total price with products, size, and quantity in javascript
我是 javascript 新手。 我正在為一家肥皂公司建立一個網站。 在客戶選擇產品、尺寸和數量后，我需要 javascript 來計算價格。 這是鏈接： http : //cgi.sice.indiana.edu/~wl15/label.php
我從這個網站嘗試了一些 javascript： http : //javascript-coder.com/javascript-form/javascript-calculator-script.phtml但我的 javascript 沒有出現。
<html> <body> <h2>Build Your Bodycare</h2> <form action="insertlabel.php" id="privtelabel" method="POST"> Product: <select name='product' id='product' onchange="calculateTotal()" required> <option value="Bar Soap">Bar Soap($5)</option> <option value="Shave Soap">Shave Soap($6)</option> <option value="Shampoo Soap">Shampoo Soap($6)</option> <option value="Face Soap">Face Soap($7)</option> <option value="Spray">Spray($8)</option> <option value="Balm">Lip Balm($8)</option> <option value="Bath Soaks">Bath Soaks($10)</option> </select> <br> Quantity: <input type="text" name="quantity" id='quantity' required><br> Size: <select name='size' id='size' onchange="calculateTotal()"> <option value="Regular Size(3oz)">Regular Size(3oz)</option> <option value="4oz">4oz (extra $2)</option> <option value="5oz">5oz (extra $3)</option> </select> <p>(Sizes are only for soaps.)</p> Price: <br> Base: <select name='base'> <option value="Dry Skin">Dry Skin</option> <option value="Neatural Skin">Neatural Skin</option> <option value="Oily Skin">Oily Skin</option> <option value="No Base">None</option> </select> <p>(Base is only for bar soaps and face soaps.)</p> Scent: <select name='scents[]' multiple="multiple" required> <option value="Cedarwood">Cedarwood</option> <option value="Citronella">Citronella</option> <option value="Clove">Clove</option> <option value="Eucalyptus">Eucalyptus</option> <option value="Fir Needle">Fir Needle</option> <option value="Geranium">Geranium</option> <option value="Lavadin">Lavadin</option> <option value="Lavender">Lavender</option> <option value="Lemongrass">Lemongrass</option> <option value="Lime">Lime</option> <option value="Patchouli">Patchouli</option> <option value="Peppermint">Peppermint</option> <option value="Rosemary">Rosemary</option> <option value="Spearmint">Spearmint</option> <option value="Star Anise">Star Anise</option> <option value="Tea Tree">Tea Tree</option> </select> <p>up to 4</p><br> Ingredients: <select name='ingredients[]' multiple="multiple"> <option value="Shea Butter">Shea Butter</option> <option value="Unscented Mango Butter">Unscented Mango Butter</option> <option value="Cocoa Butter">Cocoa Butter</option> <option value="Fennel">Fennel</option> <option value="Cornmeal">Cornmeal</option> <option value="Syrian Rue Seeds">Syrian Rue Seeds</option> <option value="Rolled Oats">Rolled Oats</option> <option value="Colloidal Oats">Colloidal Oats</option> <option value="Activated Charcoal">Activated Charcoal</option> <option value="Bentonite Clay">Bentonite Clay</option> <option value="Spirulina">Spirulina</option> <option value="Coconut Milk Powder">Coconut Milk Powder</option> <option value="Pumice">Pumice</option> <option value="Cardamom Powder">Cardamom Powder</option> <option value="None">None</option> </select> <p>up to 3</p> <p>(Ingredients are only for bar soaps, shampoo soaps, and face soaps.)</p> <br> Packaging: <select name='packaging'> <option value="Co-Brand Label">Co-Brand Label</option> <option value="Your-Brand Label">Your-Brand Label</option> <option value="Your-Brand box">Your-Brand box</option> </select> <P>Please email us you artwork at info@soapysoapcompany.com.<br> If you need help with artworks, contact us: 8122698812</P> Name: <input type="text" name="name" required> Email: <input type="text" name="email" required> Phone: <input type="number" name="phone" required><br> Message: <input type="text" name="message"><br>(For any additional request, please leave us a message)<br><br> <input type="submit" value="submit order"> </form> <script> var product_price = []; product_price['Bar Soap'] = 5; product_price['Shave Soap'] = 6; product_price['Shampoo Soap'] = 6; product_price['Face Soap'] = 7; product_price['Spray'] = 8; product_price['Balm'] = 8; product_price['Bath Soaks'] = 10; var size_price = []; size_price['Regular Size(3oz)'] = 0; size_price['4oz'] = 2; size_price['5oz'] = 3; function getProductPrice() { var soapProductPrice = 0; var theForm = document.forms["privtelabel"]; var selectedProduct = theForm.elements["product"]; soapProductPrice = product_price[selectedProduct.value]; return soapProductPrice; } function getSizePrice() { var soapSizePrice = 0; var theForm = document.forms["privtelabel"]; var selectedSize = theForm.elements["size"]; soapSizePrice = size_price[selectedSize.value]; } function getQuantity() { var theForm = document.forms["privtelabel"]; var quantity = theForm.elements["quantity"]; var howmany = 0; if (quantity.value !== "") { howmany = parseInt(quantity.value); } return howmany; } function getTotal() { var soapPrice = (getProductPrice() + getSizePrice()) * getQuantity(); var total = document.getElementById('totalPrice'); document.getElementById('totalPrice').innerHTML = "Total Price for Soap $" + soapPrice; total.style.display = 'block'; } </script> </body> </html>
我希望 javascript 計算總價並在網站上顯示價格。 謝謝你的幫助。
我稍微精簡了您的代碼，但我認為它應該足以讓您繼續前進。 您可以查看代碼注釋以獲取更多詳細信息（或發表評論，如果有什么不合理的地方我會回復）：
//Store some references to our DOM elements var productEl = document.querySelector('#product'); var quantityEl = document.querySelector('#quantity'); var sizeEl = document.querySelector('#size'); var totalCostEl = document.querySelector('#totalCost'); //Add the change event handlers on the applicable elements productEl.addEventListener('change', calculateTotal); quantityEl.addEventListener('change', calculateTotal); sizeEl.addEventListener('change', calculateTotal); //Store your data in an object literal (essentially creating a map) var product_price = {}; //Noticed I replaced the [] with {} product_price['Bar Soap'] = 5; product_price['Shave Soap'] = 6; product_price['Shampoo Soap'] = 6; product_price['Face Soap'] = 7; product_price['Spray'] = 8; product_price['Balm'] = 8; product_price['Bath Soaks'] = 10; var size_price = {}; //Noticed I replaced the [] with {} size_price['Regular Size(3oz)'] = 0; size_price['4oz'] = 2; size_price['5oz'] = 3; //Here's our single event handler - called when any of the 3 elements fire a 'change' event function calculateTotal() { //console.log() var unitCost = product_price[productEl.value]; var additionalCost = size_price[sizeEl.value] || 0; var qty = quantityEl.value || 0; totalCostEl.textContent = `Total cost: $${(unitCost * qty) + additionalCost}`; }
<html> <script src="label.js" type="text/javascript"></script> <body> <h2>Build Your Bodycare</h2> <form action="insertlabel.php" id="privtelabel" method="POST"> Product: <select name='product' id='product' required> <option value="Bar Soap">Bar Soap($5)</option> <option value="Shave Soap">Shave Soap($6)</option> <option value="Shampoo Soap">Shampoo Soap($6)</option> <option value="Face Soap">Face Soap($7)</option> <option value="Spray">Spray($8)</option> <option value="Balm">Lip Balm($8)</option> <option value="Bath Soaks">Bath Soaks($10)</option> </select> <br> Quantity: <input type="text" name="quantity" id='quantity' required><br> Size: <select name='size' id='size'> <option value="Regular Size(3oz)">Regular Size(3oz)</option> <option value="4oz">4oz (extra $2)</option> <option value="5oz">5oz (extra $3)</option> </select> <p>(Sizes are only for soaps.)</p> Price: <span id="totalCost"></span> </form> </body> </html>
如何根據Reactjs中的產品數量計算產品的總價？
[英]How to calculate total price of products based on quantity of products in Reactjs?
嘗試計算物品的總價格，同時考慮到選擇Javascript的數量
[英]Trying to calculate the total price of items taking into account the quantity selected Javascript
如何使用 JavaScript 計算購物車中產品的總價格？
[英]How can I calculate the total price of products in a cart using JavaScript?
使用javascript根據html形式的產品數量計算訂單的總成本
[英]Using javascript to calculate the total cost of an order based on quantity of products in html form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.