需要JavaScript计算帮助
Need Help Calculating in JavaScript
我的计算有问题。我知道我的代码很糟糕，因为我只是一个初学者，但我需要它来工作。请不要抱怨，并告诉我有更有效的方法来做这件事。如果这是一个很大的问题，那么就解决它，但抱怨并不能告诉我我有多糟糕……我已经知道了。你能帮我用JavaScript吗。我还需要一个运行总数出现在灰色分区。
警报将被删除
我们本应该提供网络订购服务。请帮忙完成任务（代码不用于协助……协助是一份报告，所以你不会让我上当。）把它看作是帮助正在学习的人。
这是我的代码：
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';
}
首先，我会在输入数量type="number"的地方进行所有输入，这样它就只能接受数字，而不能只接受任何文本。示例：
<input type="number" size="10" id="calamariqty" onChange="calculateTotal()">
也在您的<选择>使用价格作为值，如下所示：
<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 ...
}
请参阅此链接，了解我们为什么使用var*1来乘以vars。
在所有这些之后，我们将snack1、snack2等变量加在一起，得到total，并在orderpricesdiv中显示total。这可以在与其他东西相同的函数的末尾：
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不变。
相关文章：
- 需要帮助设置json数组
- JQuery需要帮助理解(i，el）
- 根据元素和容器大小计算边距
- 从Rally获取一个特定的标记，以便计算另一个字段中的值
- 如何在输入字段中的按钮的帮助下打开日历，该字段的类型为“＝”;日期”;
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 使用D3.js计算带有字母间距的文本长度
- JavaScript计算帮助(乘以时间）
- 需要JavaScript计算帮助
- 在自动计算方面需要一点帮助
- Handlebars.js自定义帮助程序来计算嵌套元素
- jquery简单的计算脚本几乎不需要帮助
- 需要帮助计算子节点
- 计算字段的Jquery if语句需要帮助
- 需要帮助的这个PHP复选框是值计算脚本
- 在javascript中需要计算帮助
- 如何计算车把帮助器上的变量
- 是否有任何工具/技巧/插件可以帮助我计算谷歌浏览器本身的 JSON URL 中的对象数量
- 计算帮助需要与javascript目标心率计算器
- 需要帮助计算经度和纬度中点使用javascript从php值
