我的购物应用不会把用户想买的东西加起来，也不会打印总成本
[英]My shopping app wont add up what the user wants to buy and doesnt print the total cost
问题描述
我正在制作这个迷你购物应用程序，但无法弄清楚如何获取代码以将产品成本加在一起，然后在页面上生成总成本。 我也无法弄清楚如何将交付添加到他最终的成本中。 任何帮助，将不胜感激 ：）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script>
function clickHandler() {
var orderTotal = parseInt(document.getElementById('shirtSelect').value * document.getElementById('shirtQuantity').value) + (document.getElementById('tieSelect').value * document.getElementById('tieQuantity').value);
//Shirt Select
switch (document.getElementById('shirtSelect').value) {
case 'whiteShirt':
orderTotal = orderTotal + 10;
break;
case 'blueShirt':
orderTotal = orderTotal + 10;
break;
case 'redShirt':
orderTotal = orderTotal + 10;
break;
default:
orderTotal = orderTotal + 0;
break;
}
switch (document.getElementById('tieSelect').value) {
case 'blueTie':
orderTotal = orderTotal + 7.50;
break;
case 'blackTie':
orderTotal = orderTotal + 7.50;
break;
case 'redTie':
orderTotal = orderTotal + 7.50;
default:
orderTotal = orderTotal + 0;
break;
}
alert("Your order total is " + orderTotal);
}
</script>
</head>
<body>
<select id="shirtSelect">
<option value="whiteShirt">White Shirt</option>
<option value="blueShirt">Blue Shirt</option>
<option value="redShirt">Red Shirt</option>
</select>
<select id="shirtQuantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<!-- TIE HERE-->
<br />
<select id="tieSelect">
<option value="blueTie">Blue Tie</option>
<option value="blackTie">Black Tie</option>
<option value="redTie">Red Tie</option>
</select>
<select id="tieQuantity">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br />
<select id="deliverySelect">
<option value="standard">Standard: FREE</option>
<option value="express">Express: £3.00</option>
<option value="nextDay">Next Day: £5.00</option>
</select>
<br />
<select id="customerType">
<option value="nonreg">Non-registered: No Discount</option>
<option value="reg">Registered: 10% Discount</option>
<option value="VIP">VIP: 20% Discount</option>
</select>
<br />
<button type="button" onclick="clickHandler();">Place Order!</button>
2 个解决方案
解决方案1
0 已采纳 2016-05-03 20:58:56
如果您尝试alert(document.getElementById('shirtSelect').value) ，您会发现它返回衬衫名称。 使用此值来计算orderTotal是错误的，它将是NaN 。
以下代码片段将有所帮助。
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script> function clickHandler() { //alert(document.getElementById('shirtSelect').value) var orderTotal = 0; var shirtQuantity = document.getElementById('shirtQuantity').value; var tieQuantity = document.getElementById('tieQuantity').value; //Shirt Select switch (document.getElementById('shirtSelect').value) { case 'whiteShirt': orderTotal = orderTotal + 10*shirtQuantity; break; case 'blueShirt': orderTotal = orderTotal + 10*shirtQuantity; break; case 'redShirt': orderTotal = orderTotal + 10*shirtQuantity; break; default: orderTotal = orderTotal + 0; break; } switch (document.getElementById('tieSelect').value) { case 'blueTie': orderTotal = orderTotal + 7.50*tieQuantity; break; case 'blackTie': orderTotal = orderTotal + 7.50*tieQuantity; break; case 'redTie': orderTotal = orderTotal + 7.50*tieQuantity; default: orderTotal = orderTotal + 0; break; } alert("Your order total is " + orderTotal); } </script> </head> <body> <select id="shirtSelect"> <option value="whiteShirt">White Shirt</option> <option value="blueShirt">Blue Shirt</option> <option value="redShirt">Red Shirt</option> </select> <select id="shirtQuantity"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <!-- TIE HERE--> <br /> <select id="tieSelect"> <option value="blueTie">Blue Tie</option> <option value="blackTie">Black Tie</option> <option value="redTie">Red Tie</option> </select> <select id="tieQuantity"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <br /> <select id="deliverySelect"> <option value="standard">Standard: FREE</option> <option value="express">Express: £3.00</option> <option value="nextDay">Next Day: £5.00</option> </select> <br /> <select id="customerType"> <option value="nonreg">Non-registered: No Discount</option> <option value="reg">Registered: 10% Discount</option> <option value="VIP">VIP: 20% Discount</option> </select> <br /> <button type="button" onclick="clickHandler();">Place Order!</button>
解决方案2
0 2016-05-03 21:02:01
这应该可以解决问题（尚未实施运输）：
function clickHandler() {
var orderTotal = 0;
//Shirt Select
switch (document.getElementById('shirtSelect').value) {
case 'whiteShirt':
case 'blueShirt':
case 'redShirt':
orderTotal += 10 * +document.getElementById('shirtQuantity').value;
break;
default:
break;
}
switch (document.getElementById('tieSelect').value) {
case 'blueTie':
case 'blackTie':
case 'redTie':
orderTotal += 7.50 * +document.getElementById('tieQuantity').value;
default:
break;
}
alert("Your order total is " + orderTotal);
}
淘汰赛：无法将数量变化与购物车中的总成本绑定
[英]Knockout: Unable to bind change in quantity to total cost in shopping cart
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.