我的计算有问题。我知道我的代码很糟糕，因为我只是一个初学者，但我需要它才能工作。请求不要抱怨并告诉我有更有效的方法来做到这一点。如果这是一个很大的问题然后解决，但是漂白不告诉我我有多糟糕...我已经知道了。你能用我的JavaScript帮助我吗？我还需要一个总计出现在灰色div中。
要删除的警告
我们应该做一个网上订购服务。 请帮助分配！（代码不是为了分配......代表是一份报告，所以你不会让我感到烦恼。）把它想象成帮助正在学习的人。< / p>
这是我的代码：
https://jsfiddle.net/gefxbvhr/
HTML
<title>Test Practice V3 - Order</title>
<body onload='hideTotal()'>
<div id="ocontainer">
<div id="buttons">
<div id="homebutton">
<a href="index.html">home</a>
</div>
<div id="menubutton">
<a href="menu.html">menu</a>
</div>
<div id="orderbutton">
<a href="order.html">order</a>
</div>
<div id="fbackbutton">
<a href="feedback.html">feedback</a>
</div>
</div>
<div id="content">
<br>
<br>
<form id="chipform">
<legend><b>Chips:</b></legend>
<select id="chipselectbox" onchange="calculateTotal()">
<option value="None">Select Size</option>
<option value="XS">X-Small ($2)</option>
<option value="S">Small ($3)</option>
<option value="M">Medium ($4)</option>
<option value="L">Large ($5)</option>
<option value="XL">X-Large ($6)</option>
</select>
</form>
<br>
<br>
<center>
<table>
<tr class="cboxtable">
<th> </th>
<th><b>Snack:</b></th>
<th><b>Price:</b></th>
<th><b>Quantity:</b></th>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="calamari" onClick="document.getElementById('calamariqty').style.visibility='visible';">
</form></td>
<td>Calamari (10 Pieces)</td>
<td>$6.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="calamariqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="garlicball" onClick="document.getElementById('garlicballqty').style.visibility='visible';">
</form></td>
<td>Chicken Garlic Ball</td>
<td>$6.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="garlicballqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="cnugget" onClick="document.getElementById('cnuggetqty').style.visibility='visible';">
</form></td>
<td>Chicken Nugget</td>
<td>$1.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="cnuggetqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="dsl" onClick="document.getElementById('dslqty').style.visibility='visible';">
</form></td>
<td>Dim Sum (Large)</td>
<td>$2.00</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="dslqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="dss" onClick="document.getElementById('dssqty').style.visibility='visible';">
</form></td>
<td>Dim Sum (Small)</td>
<td>$1.20</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="dssqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="bbq" onClick="document.getElementById('bbqqty').style.visibility='visible';">
</form></td>
<td>Family BBQ Chicken</td>
<td>$12.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="bbqqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="bbqccg" onClick="document.getElementById('bbqccgqty').style.visibility='visible';">
</form></td>
<td>Family BBQ Chicken + Chips + Gravy</td>
<td>$16.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="bbqccgqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="fburger" onClick="document.getElementById('fburgerqty').style.visibility='visible';">
</form></td>
<td>Fish Burger</td>
<td>$6.00</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="fburgerqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="fcake" onClick="document.getElementById('fcakeqty').style.visibility='visible';">
</form></td>
<td>Fish Cake</td>
<td>$2.00</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="fcakeqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="flakeb" onClick="document.getElementById('flakebqty').style.visibility='visible';">
</form></td>
<td>Flake (Battered)</td>
<td>$1.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="flakebqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="flakec" onClick="document.getElementById('flakecqty').style.visibility='visible';">
</form></td>
<td>Flake (Crumbed)</td>
<td>$1.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="flakecqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="kabana" onClick="document.getElementById('kabanaqty').style.visibility='visible';">
</form></td>
<td>Kabana</td>
<td>$2.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="kabanaqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="ppup" onClick="document.getElementById('ppupqty').style.visibility='visible';">
</form></td>
<td>Pluto Pup/Dagwood Dog</td>
<td>$3.00</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="ppupqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="pcake" onClick="document.getElementById('pcakeqty').style.visibility='visible';">
</form></td>
<td>Potato Cake </td>
<td>$1.00</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="pcakeqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="seas" onClick="document.getElementById('seasqty').style.visibility='visible';">
</form></td>
<td>Sea Scallop</td>
<td>$2.00</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="seasqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="sfstick" onClick="document.getElementById('sfstickqty').style.visibility='visible';">
</form></td>
<td>Seafood Stick</td>
<td>$1.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="sfstickqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="sproll" onClick="document.getElementById('sprollqty').style.visibility='visible';">
</form></td>
<td>Spring Roll (Large)</td>
<td>$2.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="sprollqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
<tr>
<td class="cboxtable">
<form>
<input type="checkbox" id="wht" onClick="document.getElementById('whtqty').style.visibility='visible';">
</form></td>
<td>Whiting (Crumbed)</td>
<td>$1.50</td>
<td>
<form style="visibility:hidden">
<input type="text" size="10" id="whtqty" onkeypress="return isNumber(event)" onChange="calculateTotal()">
</form>
</td>
</tr>
</table>
</center>
<br>
<div id="orderprices">
</div><br>
<center>
<form>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</center>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background-image:url(../5%20February/Images/Water%20Image.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#container {
width: 80%;
height: 800px;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 20px;
box-shadow: 10px 10px 20px #333;
border-radius: 30px;
padding:20px;
}
#ocontainer {
width: 80%;
height: 100%;
background-color: #FFF;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
margin-bottom: 20px;
box-shadow: 10px 10px 20px #333;
border-radius: 30px;
padding:20px;
}
#buttons {
height:50px;
width:85%;
background-color:#FFF;
margin-left:auto;
margin-right:auto;
}
#homebutton {
height: 100%;
width: 23.5%;
float: left;
background-color: #FFF;
border-radius: 15px;
margin-right:2%;
}
#menubutton {
height:100%;
width:23.5%;
float:left;
background-color:#FFF;
border-radius: 15px;
margin-right:2%;
}
#orderbutton {
height:100%;
width:23.5%;
float:left;
background-color:#FFF;
border-radius: 15px;
margin-right:2%;
}
#fbackbutton {
height:100%;
width:23.5%;
float:left;
background-color:#FFF;
border-radius: 15px;
}
a {
display:block;
text-decoration: none;
text-transform: uppercase;
color:black;
font-size:18px;
height:50px;
width:100%;
margin-right:0;
margin-left:0px;
text-align:center;
line-height:50px;
}
#homebutton:hover {
background-color:#00BBFF;
}
#menubutton:hover {
background-color:#00BBFF;
}
#orderbutton:hover {
background-color:#00BBFF;
}
#fbackbutton:hover {
background-color:#00BBFF;
}
#feedback {
padding:10px;
}
#content {
width: 95%;
height: 1000px;
padding-top:30px;
padding-bottom:20px;
margin-left:auto;
margin-right:auto;
font-size:16px;
}
#cboxform {
width: 39%;
float: left;
display: block;
line-height: 26px;
height: 550px;
padding-right: 10px;
padding-left: 10px;
}
#quantityform {
width: 47.5%;
float: right;
height: 550px;
}
#quantityform br {
margin-bottom: 10px;
}
#pricediv {
float: left;
line-height: 26px;
width: 10%;
height: 550px;
}
#chipform {
width:100%;
}
#orderprices
{
padding:10px;
font-weight:bold;
background-color:#666;
height:15px;
color:#FFF;
width:50%;
margin-left:auto;
margin-right:auto
}
table {
alignment-adjust:central;
}
的JavaScript
function getChipPrice()
{
var chip_prices= new Array();
chip_prices["None"]=0;
chip_prices["XS"]=2;
chip_prices["S"]=3;
chip_prices["M"]=4;
chip_prices["L"]=5;
chip_prices["XL"]=6;
var shopChipPrice=0;
var theForm = document.forms["chipform"];
var selectedChip = theForm.elements["chipselectbox"];
shopChipPrice = chip_prices[select.value];
alert(shopChipPrice);
return shopChipPrice;
}
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
function snackPriceCalculate() {
var snack1 = document.getElementById('calamariqty');
var snack2 = document.getElementById('cnuggetqty');
var snack3 = document.getElementById('dslqty');
var snack4 = document.getElementById('dssqty');
var snack5 = document.getElementById('bbqqty');
var snack6 = document.getElementById('bbqccgqty');
var snack7 = document.getElementById('fburgerqty');
var snack8 = document.getElementById('fcakeqty');
var snack9 = document.getElementById('flakebqty');
var snack10 = document.getElementById('flakecqty');
var snack11 = document.getElementById('garlicballqty');
var snack12 = document.getElementById('kabanaqty');
var snack13 = document.getElementById('pcakeqty');
var snack14 = document.getElementById('ppupqty');
var snack15 = document.getElementById('seasqty');
var snack16 = document.getElementById('sfstickqty');
var snack17 = document.getElementById('sprollqty');
var snack18 = document.getElementById('whtqty');
var totalPrice=0;
if (parseInt(snack1.value)>0) {totalPrice = parseInt(snack1.value)*6.50;}
if (parseInt(snack2.value)>0) {totalPrice = parseInt(snack2.value)*6.50;}
if (parseInt(snack3.value)>0) {totalPrice = parseInt(snack3.value)*2.00;}
if (parseInt(snack4.value)>0) {totalPrice = parseInt(snack4.value)*2.50;}
if (parseInt(snack5.value)>0) {totalPrice = parseInt(snack5.value)*1.20;}
if (parseInt(snack6.value)>0) {totalPrice = parseInt(snack6.value)*12.50;}
if (parseInt(snack7.value)>0) {totalPrice = parseInt(snack7.value)*16.50;}
if (parseInt(snack8.value)>0) {totalPrice = parseInt(snack8.value)*6.00;}
if (parseInt(snack9.value)>0) {totalPrice = parseInt(snack9.value)*2.00;}
if (parseInt(snack10.value)>0) {totalPrice = parseInt(snack10.value)*1.50;}
if (parseInt(snack11.value)>0) {totalPrice = parseInt(snack11.value)*1.50;}
if (parseInt(snack12.value)>0) {totalPrice = parseInt(snack12.value)*2.50;}
if (parseInt(snack13.value)>0) {totalPrice = parseInt(snack13.value)*3.00;}
if (parseInt(snack14.value)>0) {totalPrice = parseInt(snack14.value)*1.00;}
if (parseInt(snack15.value)>0) {totalPrice = parseInt(snack15.value)*2.00;}
if (parseInt(snack16.value)>0) {totalPrice = parseInt(snack16.value)*1.50;}
if (parseInt(snack17.value)>0) {totalPrice = parseInt(snack17.value)*2.50;}
if (parseInt(snack18.value)>0) {totalPrice = parseInt(snack18.value)*1.50;}
alert(totalPrice);
snackPriceCalculate();
getChipPrice();
}
function calculateTotal()
{
var orderPrice = snackPriceCalculate() + getChipPrice();
alert("I am an alert box!");
var totaldiv = document.getElementById('orderprices');
totaldiv.style.display='block';
totaldiv.innerHTML = "Total Price For your order $"+orderPrice;
}
function hideTotal()
{
var totaldiv = document.getElementById('orderprices');
divobj.style.display='none';
}
答案 0 :(得分：0)
首先，我会输入您输入数量类型=“数字”的所有输入，这样它只能接受一个数字，而不仅仅是任何文本。例如：
<input type="number" size="10" id="calamariqty" onChange="calculateTotal()">
也在你的＆lt;选择＆gt;使用价格作为这样的值：
<select id="chipselectbox" onchange="calculateTotal()">
<option value="0">Select Size</option>
<option value="2.00">X-Small ($2)</option>
<option value="3.00">Small ($3)</option>
<option value="4.00">Medium ($4)</option>
<option value="5.00">Large ($5)</option>
<option value="6.00">X-Large ($6)</option>
</select>
而不是XS或M等。
然后在数量输入onchange调用的函数下，为每个小吃添加如下内容：
function calculateTotal() {
var chips = document.getElementById("chipselectbox").value;
if ($('#calamari').attr('checked')) {
var quantity1 = $('#calamariqty').val();
var price1 = 6.50;
var snack1 = quantity1*1 * price1*1;
} else {
var snack1 = 0;
}
if ($('#garlicball').attr('checked')) {
var quantity2 = $('#garlicballqty').val();
var price2 = 6.50;
var snack2 = quantity1*1 * price1*1;
} else {
var snack2 = 0;
}
//and so on ...
}
请参阅this link，了解为什么我们为varars采用var * 1。
然后，我们将snack1，snack2等变量加在一起得到总数并显示orderprices div中的总数。这可能与其他东西的功能结束：
var total = chips*1 + snack1*1 + snack2*1 + snack3*1 + //and so on ...
document.getElementById("orderprices ").innerHTML = "Total: $" + total + "0";
所以你所拥有的这两个函数被我们制作的这个函数所取代：
function calculateTotal() {
var chips = document.getElementById("chipselectbox").value;
if ($('#calamari').attr('checked')) {
var quantity1 = $('#calamariqty').val();
var price1 = 6.50;
var snack1 = quantity1*1 * price1*1;
} else {
var snack1 = 0;
}
if ($('#garlicball').attr('checked')) {
var quantity1 = $('#garlicballqty').val();
var price1 = 6.50;
var snack1 = quantity1*1 * price1*1;
} else {
var snack2 = 0;
}
//and so on ...
var total = chips*1 + snack1*1 + snack2*1 + snack3*1 + //and so on ... ;
document.getElementById("orderprices ").innerHTML = "Total: $" + total + "0";
}
我希望这有效，因为我从未对此进行过实际测试。如果你这样做，你不需要输入和所有这些形式的东西只是保持输入上的id相同。