Answer to Question #48473 in AJAX | JavaScript | HTML | PHP for john

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

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Comments

No comments. Be first!

Leave a comment

Ask Your question

LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS
paypal