我是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能计算总价并在网站上显示价格。感谢您的帮助。
答案 0 :(得分:0)
我稍微减少了代码的数量,但我认为它足以使您如愿以偿。您可以检查代码注释以获取更多详细信息(或留下注释,如果没有任何意义,我会回复):
//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>