How to compute a total using Javascript

Question

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;

Welcome to Stack Overflow. Please read: stackoverflow.com/help/how-to-ask — Leandro Bardelli
– Leandro Bardelli, Commented Nov 2, 2014 at 0:59
You will need to show the actual data you're trying to do a sum of. — jfriend00
– jfriend00, Commented Nov 2, 2014 at 1:00
Thanks for editing and improve with code your own answer. As you can see, people will glad to help you if you can help them :) +1 for edit — Leandro Bardelli
– Leandro Bardelli, Commented Nov 2, 2014 at 3:08

Dave Salomon · Accepted Answer · 2014-11-02 16:12:52Z

1

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!

edited Nov 2, 2014 at 16:12

answered Nov 2, 2014 at 1:34

Dave Salomon

3,2771 gold badge19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Minecraft2014 Over a year ago

Thanks a lot really. I finished my code and it worked out perfectly. I haven't really done something like this yet so it was well different but I get it now with your explanation.

Leandro Bardelli Over a year ago

Dave: thanks for your answer. When OP ask the first time, did not apply any code at all. That's why he get so many downvotes and comments.

Collectives™ on Stack Overflow

How to compute a total using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related