Javascript 如何将总计相加并显示在文本框中_Javascript_Menu

Javascript 如何将总计相加并显示在文本框中

javascript menu

Javascript 如何将总计相加并显示在文本框中,javascript,menu,Javascript,Menu,当我试图弹出我的总数时，我似乎无法得到它。在my.js文件中的代码上方是切换复选框；从现在起，所有这些都可以正常工作，但将它们相加并在txtotal框中得出一个总数是我唯一要解决的问题 var total; var outputArea; var btnCompute; function ToggleBurgers() { var checkbox = document.getElementById('chkBurgers'); var burgers = document.ge

当我试图弹出我的总数时，我似乎无法得到它。在my.js文件中的代码上方是切换复选框；从现在起，所有这些都可以正常工作，但将它们相加并在

txtotal

框中得出一个总数是我唯一要解决的问题

  var total;
  var outputArea;
  var btnCompute;
  function ToggleBurgers() {
var checkbox = document.getElementById('chkBurgers');
var burgers = document.getElementById('divBurgers');

if (checkbox.checked) {
    burgers.style.visibility = 'visible';
} else {
    burgers.style.visibility = 'hidden';
}
}
 function ToggleFries(){
 var checkbox = document.getElementById('chkFries');
 var fries = document.getElementById('divFries');

if (checkbox.checked) {
    fries.style.visibility = 'visible';
} else {
    fries.style.visibility = 'hidden';
}
}

function ToggleDrinks(){
var checkbox = document.getElementById('chkDrinks')
var drinks = document.getElementById('divDrinks');

if (checkbox.checked) {
    drinks.style.visibility = 'visible';
   }else {
     drinks.style.visibility = 'hidden';
  } 
}


  function ComputeTotal() {
     var total = 0;
     var burgers = document.getElementById('divBurgers');
     var fries = document.getElementById('divFries');
     var drinks = document.getElementById('divDrinks');
     var radBurgerRegular = document.getElementById('radBurgerRegular');
     var radBurgerCheese = document.getElementById('radBurgerCheese');
     var radBurgerBacon = document.getElementById('radBurgerBacon');
     var radBurgerBaconCheese = document.getElementById('radBurgerBaconCheese');
     var radFriesSmall = document.getElementById('radFriesSmall');
     var radFriesMedium = document.getElementById('radFriesMedium');
     var radFriesLarge = document.getElementById('radFriesLarge');
     var radDrinkSoda = document.getElementById('radDrinkSoda');
     var radDrinkWater = document.getElementById('radDrinkWater');
     var outputArea = document.getElementById('txtTotal');
     outputArea.innerHTML = total + divBurgers + divFries + divDrinks;

  if (burgers.checked){
  if (radBurgerRegular.checked){ 
    total = total + radBurgerRegular;
  }if (radBurgerCheese.checked){
    total = total + radBurgerCheese;
  }if (radBurgerBacon.checked){
    total = total + radBurgerBacon;
  }if (radBurgerBaconCheese.checked){
    total = total + radBurgerBaconCheese;
  }
  }else if (fries.checked){
    if (radFriesSmall.checked){
        total = total + radFriesSmall;
    }if (radFriesMedium.checked){
        total = total + radFriesMedium;
    }if (radFriesSmall.checked){
        total = total + radFriesLarge;
    }
    } else if (drinks.checked){
    if (radDrinkSoda.checked){
        total = total + radDrinkSoda;
    }if (radDrinkWater.checked){
        total = total + radDrinkWater;
       }
   }


 }


function init() {
   var chkBurgers = document.getElementById('chkBurgers');
   chkBurgers.onchange = ToggleBurgers;

   var chkFries = document.getElementById('chkFries');
   chkFries.onchange = ToggleFries;

   var chkDrinks = document.getElementById('chkDrinks');
   chkDrinks.onchange = ToggleDrinks;

   var btnCompute = document.getElementById('btnCompute');
   btnCompute.onclick = ComputeTotal;

   var outputArea = document.getElementById('txtTotal');
   outputArea.innerHTML = total
}

window.onload = init;

HTML代码在这里

<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body>
<div class="page">
    <div class="topbar">
        Menu
    </div>
    <div class="row">

        <!--Burgers CheckBox-->
        <div class="cell">
            <input type="checkbox" name="chkBurgers" id="chkBurgers" />     <label for="chkBurgers">Burgers</label>
        </div>

        <!--Cell Containing Burger Menu-->
        <div class="cell" id="divBurgers" style="visibility:hidden;">
            <input type="radio" name="radBurgers" id="radBurgerRegular" /><label for="radBurgerRegular">Regular (4.19)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerCheese" /><label for="radBurgerCheese">w/ Cheese (4.79)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerBacon" /><label for="radBurgerBacon">w/ Bacon (4.79)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerBaconCheese" /><label for="radBurgerBaconCheese">w/ Bacon and Cheese (5.39)</label><br />
        </div>
    </div>
    <div class="clear"></div>
    <div class="row">

        <!--Fries CheckBox-->
        <div class="cell">
            <input type="checkbox" name="chkFries" id="chkFries" /><label for="chkFries">Fries</label>
        </div>

        <!--Cell Containing Fries Menu-->
        <div class="cell" id="divFries" style="visibility:hidden;">
            <input type="radio" name="radFries" id="radFriesSmall" /><label for="radFriesSmall">Small (2.39)</label><br />
            <input type="radio" name="radFries" id="radFriesMedium" /><label for="radFriesMedium">Medium (3.09)</label><br />
            <input type="radio" name="radFries" id="radFriesLarge" /><label for="radFriesSmall">Large (4.99)</label><br />
        </div>
    </div>
    <div class="clear"></div>
    <div class="row">

        <!--Drinks CheckBox-->
        <div class="cell">
            <input type="checkbox" name="chkDrinks" id="chkDrinks" /><label  for="chkDrinks">Drinks</label>
        </div>

        <!--Cell Containing Drink Menu-->
        <div class="cell" id="divDrinks" style="visibility:hidden;">
            <input type="radio" name="radDrinks" id="radDrinkSoda" /><label   for="radDrinkSoda">Soda (1.69)</label><br />
            <input type="radio" name="radDrinks" id="radDrinkWater" /><label for="radDrinkWater">Bottled Water (1.49)</label><br />
        </div>

        <!--Cell Containing Compute Button and Total Field-->
        <div class="cell" style="float:right;">
            Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" /><br /><br />
            <button id="btnCompute" name="btnCompute">Compute Total</button>
        </div>
    </div>
    <div class="clear"></div>
</div>
<link rel="stylesheet" type="text/css" href="Chapter9.css">
<script src="Chapter9.js"></script>
</body>
</html>


餐厅菜单
菜单
汉堡
常规（4.19）

w/奶酪（4.79）

w/培根（4.79）

含培根和奶酪（5.39）

炸薯条
小型（2.39）

中等（3.09）

大型（4.99）

饮料
苏打水（1.69）

瓶装水（1.49）

总餐费：


计算总数

总计在init中未定义

替换

 var outputArea = document.getElementById('txtTotal');
   outputArea.innerHTML = total

与

或者可能更好的选择是初始化total

total = 0;    
var outputArea = document.getElementById('txtTotal');
       outputArea.innerHTML = total;

首先，您要清除块中的

else

，在该块中您要检查是否检查了内容。这只允许你得到汉堡，薯条或饮料，当你想得到每一个

因此，这应该是：

if(burgers.checked){
    if(radBurgerRegular.checked){
        total = total + radBurgerRegular;
    }
    ...
}
if(fries.checked){
    ...
}
if(drinks.checked){
    ...
}

此外，您正在将所有这些添加到总计中，然后不使用它做任何事情

动议如下：

 var outputArea = document.getElementById('txtTotal');
 outputArea.innerHTML = total + divBurgers + divFries + divDrinks;

在函数的底部（并去掉所有divBurgers、divFries的东西）：

下一个问题是，没有任何地方真正增加价格。当您

getElementById（）

时，该值不会神奇地变成括号中的价格。您需要将

total=total+radBurgerRegular

替换为以下价格：

if(burgers.checked){
    if(radBurgerRegular.checked){
        total = total + 4.19;
    }
    ...
}

最后，您希望将显示区域更改为范围而不是输入。更改：

Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" />

为此：

 var burgers = document.getElementById('chkBurgers');
 var fries = document.getElementById('chkFries');
 var drinks = document.getElementById('chkDrinks');

因为div不能被“检查”，并且总是返回undefined（false）。

问题出在ComputeTotal函数内部。我建议您考虑一下以下实施：

var合计；
输出区变量；
var BTN计算机；
函数ToggleBurgers（）{
var checkbox=document.getElementById（'chkBurgers'）；
var burgers=document.getElementById（'divBurgers'）；
如果（复选框。选中）{
burgers.style.visibility='visible'；
}否则{
burgers.style.visibility='hidden'；
}
}
函数ToggleFries（）{
var checkbox=document.getElementById（'chkFries'）；
var fries=document.getElementById（'divFries'）；
如果（复选框。选中）{
fries.style.visibility='visible'；
}否则{
fries.style.visibility='hidden'；
}
}
函数切换{
var checkbox=document.getElementById（'chkDrinks'））
var drinks=document.getElementById（'divDrinks'）；
如果（复选框。选中）{
drinks.style.visibility='visible'；
}否则{
drinks.style.visibility='hidden'；
}
}
函数ComputeTotal（）{
var合计=0；
var burgersCost=0；
var-friesCost=0；
var-drinksCost=0；
if（document.getElementById（'chkBurgers'）。选中）{
var burgersObj=document.querySelector（'input[name=“radBurgers”]：checked'）；
var burgersvalfromlab=document.querySelector（'label[for=“”+burgersObj.id+”）.textContent；
burgersCost=burgersValFromLabel.substring（burgersValFromLabel.lastIndexOf（“（”）+1，burgersValFromLabel.lastIndexOf（“）”）；
}
if（document.getElementById（'chkFries'）。选中）{
var friesObj=document.querySelector（'input[name=“radFries”]：checked'）；
var friesvalfromlab=document.querySelector（'label[for=“”+friesbj.id+”）.textContent；
friesCost=friesValFromLabel.substring（friesValFromLabel.lastIndexOf（“（”）+1，friesValFromLabel.lastIndexOf（“）”）；
}
if（document.getElementById（'chkDrinks'）。选中）{
var drinksObj=document.querySelector（'input[name=“radDrinks”]：checked'）；
var drinksvalfromlab=document.querySelector（'label[for=“+drinksObj.id+”））.textContent；
drinksCost=drinksvalfromlab.substring（drinksvalfromlab.lastIndexOf（“”+1，drinksvalfromlab.lastIndexOf（“”））；
}
var outputArea=document.getElementById（'txtTotal'）；
outputArea.value=total+parseFloat（burgersCost）+parseFloat（friesCost）+parseFloat（drinksCost）；
}
函数init（）{
var chkBurgers=document.getElementById（'chkBurgers'）；
chkBurgers.onchange=切换汉堡；
var chkFries=document.getElementById（'chkFries'）；
chkFries.onchange=切换薯条；
var chkDrinks=document.getElementById（'chkDrinks'）；
chkDrinks.onchange=切换饮料；
var btnCompute=document.getElementById（'btnCompute'）；
btnCompute.onclick=ComputeTotal；
var outputArea=document.getElementById（'txtTotal'）；
outputrea.innerHTML=总计
}
window.onload=init

菜单
汉堡
常规（4.19）

w/奶酪（4.79）

w/培根（4.79）

含培根和奶酪（5.39）

炸薯条
小型（2.39）

中等（3.09）

大型（4.99）

饮料
苏打水（1.69）

瓶装水（1.49）

总餐费：


Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" />

Total Meal Cost: <span id="txtTotal"></span>

 var burgers = document.getElementById('divBurgers');
 var fries = document.getElementById('divFries');
 var drinks = document.getElementById('divDrinks');

 var burgers = document.getElementById('chkBurgers');
 var fries = document.getElementById('chkFries');
 var drinks = document.getElementById('chkDrinks');