如何添加总计并在文本框中显示它们

时间：2015-12-03 20:07:01

标签： javascript menu

当试图让我的总数弹出时，我似乎无法得到它。我的.js文件中的代码上方是切换复选框;所有这一切现在都有效，但将它们加在一起并在txtTotal框中提出总数是我唯一能够挣扎的事情。

  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>

3 个答案:

答案 0 :(得分：0)

在init中未定义总计。

替换

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

与

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

或者更好的选择是初始化总数。

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

答案 1 :(得分：0)

首先，您要删除正在检查是否已检查事项的块中的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的东西）：

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

下一个问题是实际上没有添加价格。当您getElementById()时，该值不会神奇地成为括号中的价格。您需要将total = total + radBurgerRegular替换为价格：

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

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

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');

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

答案 2 :(得分：0)

问题出在ComputeTotal函数中。 我建议你看看以下实现：

＆＃13;
＆＃13; 
    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 burgersCost = 0;
        var friesCost = 0;
        var drinksCost = 0;

        if (document.getElementById('chkBurgers').checked) {
            var burgersObj = document.querySelector('input[name="radBurgers"]:checked');
            var burgersValFromLabel = document.querySelector('label[for="' + burgersObj.id + '"]').textContent;
            burgersCost = burgersValFromLabel.substring(burgersValFromLabel.lastIndexOf("(")+1,burgersValFromLabel.lastIndexOf(")"));
        }

        if (document.getElementById('chkFries').checked) {
            var friesObj = document.querySelector('input[name="radFries"]:checked');
            var friesValFromLabel = document.querySelector('label[for="' + friesObj.id + '"]').textContent;
            friesCost = friesValFromLabel.substring(friesValFromLabel.lastIndexOf("(") + 1, friesValFromLabel.lastIndexOf(")"));
        }

        if (document.getElementById('chkDrinks').checked) {
            var drinksObj = document.querySelector('input[name="radDrinks"]:checked');
            var drinksValFromLabel = document.querySelector('label[for="' + drinksObj.id + '"]').textContent;
            drinksCost = drinksValFromLabel.substring(drinksValFromLabel.lastIndexOf("(") + 1, drinksValFromLabel.lastIndexOf(")"));
        }


        var outputArea = document.getElementById('txtTotal');
        outputArea.value = total + parseFloat(burgersCost) + parseFloat(friesCost) + parseFloat(drinksCost);
    }


    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;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题