Нужна помощь Расчет в JavaScript

-1

У меня проблемы с моими расчетами. Я знаю, что мой код ужасен, поскольку я всего лишь новичок, но мне нужно, чтобы он работал. Просьбы не жалуются и говорят мне, что есть более эффективные способы сделать это. Если это большая часть проблемы, то исправить, но bleas не говорят мне, насколько я плохо ... я уже знаю. Можете ли вы просто помочь мне с моим JavaScript. Мне также нужно, чтобы общее количество отображалось в сером div.Нужна помощь Расчет в 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'; 
}

источник

2015-03-26 JayC

Я предлагаю вам помочь с вашим заданием, чтобы вы ясно дали понять, что ожидаемые и фактические результаты. В настоящее время, как написано, вопрос предполагает, что мы выберем проблему и оттуда. Например, вы говорите: «Можете ли вы просто помочь мне с моим JavaScript. Мне также нужно, чтобы общее количество отображалось в сером div». «- Помогите вам в чем именно и в дополнение к _what? Какова ваша проблема при вычислении текущей суммы? Вы не понимаете, что это?Вы получаете неправильный результат? Вы не знаете, с чего начать? Представьте, что вы читали свой вопрос с 0 знаниями о назначении. :) – enhzflep

Итоговые значения не вычисляются должным образом в функции calculateTotal(), и я не думаю, что функция getChipprice() работает. – JayC

Я хочу, чтобы работающий общий итог находился в сером div в белом тексте. Если вы посмотрите на js скрипку, вы увидите, что я имею в виду о сером div – JayC

Хорошо, сначала я сделаю все входные данные, в которые вы вводите тип количества = «число», чтобы он мог принимать только число, а не только текст. Пример:

<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 и т.д.

затем под функцию, вызываемую по количеству вход на обмен, для каждой закуски положить что-то вроде этого:

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, чтобы узнать, почему мы делаем var * 1 для умножения vars.

, и после всего этого мы добавляем переменные snack1, snack2 и т. Д. Вместе, чтобы получить общее количество и отобразить общее количество в счете pr. это может быть в конце той же функции, что и другие вещи:

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"; 
}

Я надеюсь, что это работает, потому что я никогда не тестировал это. также, если вы делаете это таким образом, вам не нужны ваши входы и прочее во всех этих формах, просто держите идентификатор одинаковым на входах.

источник

2015-03-26 07:21:53

Нужна помощь Расчет в JavaScript

ответ

Смежные вопросы