Question

Question #48473

I am making a restaurant menu but just can't seem to figure it out.
Here goes the HTML
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body>
<div class="page">
<div class="topbar">
Menu
</div>
<div class="row">


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


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


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


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


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


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


<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>
And the javascript to it.
var total;

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 ComputeTotal() {
}

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

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

window.onload = init;
Thanks for the help.

Expert's answer

Answer on Question #48473, Programming, AJAX | JavaScript | HTML | PHP

Correct HTML code:

<!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 name="chkBurgers" id="chkBurgers" type="checkbox"/>
</div>
<!--Cell Containing Burger Menu-->
<div class="cell" id="divBurgers" style="visibility:hidden;">
<input id="radBurgerRegular" type="radio" value="4.19" name="radBurgers" value="4.79" type="radio" id="radBurgerCheese" value="4.79" type="radio">
</div>
</div>
</html>
</body>
</html>
<!--Fries CheckBox-->
<div class="cell">
<input id="chkFries" type="checkbox"/>
</div>
<!--Cell Containing Fries Menu-->
<div class="cell" id="divFries" style="visibility:hidden;">
<input id="radFriesSmall" type="radio" value="2.39" name="radFries" id="radFriesSmall" type="radio" value="3.09" type="radio" id="radFriesMedium" value="3.09" type="radio">
<input id="radFriesLarge" name="radFries" value="4.99" type="radio" value="4.99"/>
</div>
<div class="clear">
</div>
<div class="row">
<!--Drinks CheckBox-->
<div class="cell">
<input id="chkDrinks" name="chkDrinks" type="checkbox"/>
</div>
<!--Cell Containing Drink Menu-->
<div class="cell" id="divDrinks" style="visibility:hidden;">
<input id="radDrinksSoda" name="radDrinks" type="radio" value="1.69"/>
<input id="radDrinkSoda" name="radDrinks" type="radio" value="1.49"/>
<input id="radDrinkWater" name="radDrinks" type="radio" value="Bottled Water (1.49)"/>
</div>
<!--Cell Containing Compute Button and Total Field-->
<div class="cell" style="float:right;">
Total Meal Cost: <input id="btnCompute" name="btnCompute" type="text"/>
</div>
</div>
<div class="clear">
</div>
<link href="week11.css" rel="stylesheet" type="text/css"/>
<script src="week11.js"></script>
</body>
Correct js code:
var total;
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 getSelectedRadio(radios) {
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
return parseFloat(radios[i].value);
break;
}
}
return parseFloat("0");
}
function ComputeTotal() {
var summ = 0;
var burgers = document.getElementById('divBurgers');
var fries = document.getElementById('divFries');
var drinks = document.getElementById('divDrinks');
if (burgers.style.visibility == "visible") {
var radios = document.getElementsByName('radBurgers');
summ+=getSelectedRadio(radios);
}
if (fries.style.visibility == "visible") {
var radios = document.getElementsByName('radFries');
summ+=getSelectedRadio(radios);
}
if (drinks.style.visibility == "visible") {
var radios = document.getElementsByName('radDrinks');
summ+=getSelectedRadio(radios);
}
var txtTotal=document.getElementById('txtTotal');
txtTotal.value = summ.toFixed(2); //precision
total = summ.toFixed(2);
}
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;

http://www.AssignmentExpert.com/

Learn more about our help with Assignments: HTML Javascript PHP AJAX

Comments

No comments. Be the first!