CODEWITHSUNDEEP
javascript
Minecraft2014
Minecraft2014

Reputation: 13

How to compute a total using Javascript

I'm working on a restaurant menu and with this I've create burgers, fries, and drinks as check boxes. when you click on burgers or fries or drinks options appear for you to choose from like a burger with cheese or a burger plain or with bacon or with both is available. Also with fries you can choose small medium or large and drinks have soda or bottled water. My question was how to compute the total of said items

Burgers

Regular (4.19) w/ Cheese (4.79) w/ Bacon (4.79) w/ Bacon and Cheese (5.39)

Fries Small (2.39) Medium (3.09) Large (4.99)

Drinks

Soda (1.69) Bottled Water (1.49)

and with the advice I received I created this with the desire result I was seeking.

<!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" value="4.19" /><label  
for="radBurgerRegular">Regular (4.19)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerCheese" value="4.79" /><label 
for="radBurgerCheese">w/ Cheese (4.79)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerBacon" value="4.79" /><label 
for="radBurgerBacon">w/ Bacon (4.79)</label><br />
            <input type="radio" name="radBurgers" id="radBurgerBaconCheese" value="5.39" /><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" value="2.39" /><label 
for="radFriesSmall">Small (2.39)</label><br />
            <input type="radio" name="radFries" id="radFriesMedium" value="3.09" /><label 
for="radFriesMedium">Medium (3.09)</label><br />
            <input type="radio" name="radFries" id="radFriesLarge" value="4.99" /><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" value="1.69" /><label 
for="radDrinkSoda">Soda (1.69)</label><br />
            <input type="radio" name="radDrinks" id="radDrinkWater" value="1.49" /><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="week11.css">
<script src="week11.js"></script>
</body>
</html>

Javascript:

var total = parseFloat(document.getElementById('txtTotal').value);

function ToggleBurgers() {
var chkBurgers = document.getElementById('chkBurgers');
var burgers = document.getElementById('divBurgers');

if (chkBurgers.checked) {
    burgers.style.visibility = 'visible';
} else {
    burgers.style.visibility = 'hidden';
}
}

function ToggleFries() {
var chkFries = document.getElementById('chkFries');
var fries = document.getElementById('divFries');

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

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

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

function ComputeTotal() {
var total = 0;
    if(document.getElementById('chkBurgers').checked){
    if(document.getElementById('radBurgerRegular').checked){
         total += 4.19;
    }
    if(document.getElementById('radBurgerCheese').checked){
         total += 4.79;
    }
    if(document.getElementById('radBurgerBacon').checked){
         total += 4.79;
    }
    if(document.getElementById('radBurgerBaconCheese').checked){
         total += 5.39;
    }
}

if(document.getElementById('chkFries').checked){
if(document.getElementById('radFriesSmall').checked){
        total += 2.39;
}
if(document.getElementById('radFriesMedium').checked){
        total += 3.09;
}
if(document.getElementById('radFriesLarge').checked){
        total += 4.99;
}
}

if(document.getElementById('chkDrinks').checked){
if(document.getElementById('radDrinkSoda').checked){
        total += 1.69;
}
if(document.getElementById('radDrinkWater').checked){
        total += 1.49;
}
}
document.getElementById('txtTotal').value = total;
}

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

window.onload = init;

Upvotes: 0

Views: 2654

Answers (1)

Dave Salomon
Dave Salomon

Reputation: 3287

I think this question is OK for Stack. It's a bit tutorialy, but at least code has been provided, etc...

Anyway, on with the code:

function ComputeTotal() {
    var total = 0;
    if(document.getElementById('chkBurgers').checked){
        if(document.getElementById('radBurgerRegular').checked){
             total += 4.19;
        }
        if(document.getElementById('radBurgerCheese').checked){
             total += 4.79;
        }
        if(document.getElementById('radBurgerBacon').checked){
             total += 4.79;
        }
        if(document.getElementById('radBurgerBaconCheese').checked){
             total += 5.39;
        }
    }

    if(document.getElementById('chkFries').checked){
        // -- etc. etc.
    }

    // -- etc. etc.
    document.getElementById('txtTotal').value = total;

}

You could improve the code by setting the "value" of the radio button to be the price. e.g.

<input type="radio" name="radBurgers" id="radBurgerRegular" value="4.19" /><label for="radBurgerRegular">Regular (4.19)</label>

You could then just do something like:

total += document.getElementById('radBurgerRegular').checked ? parseFloat(document.getElementById('radBurgerRegular').value) : 0;

for each radio button.

You could even wrap that up in a function, something like:

total += addValueOf('radBurgerRegular');  // -- for each line

and set the function to be:

function addValueOf(elementId){
    return document.getElementById(elementId).checked ? parseFloat(document.getElementById(elementId).value : 0;
}

You could definitely write it quicker, neater, better and prettier with jQuery, but it's good to learn the building blocks first -- keep it up!

Upvotes: 1

Related Questions