New Topic/Question
Reply
Question:
Develop, test, and validate an HTML document that has checkboxes for apple ( 59 cents each), orange ( 49 cents each), and banana ( 39 cents each), along with a button. Each of the checkboxes should have its own onclick event handler. These handlers must add the cost of their fruit to a total cost. An event handler for the button must produce an alert window with the message , where is the total cost of the chosen fruit, including 5 percent sales tax. This handler must return false ( to avoid actual submission of the form data).
Any advise?
<!DOCTYPE html>
<!-- Exercise 5.3.html
A document for Exercise 5.3.js -->
<html lang = "en">
<head>
<script type = "text/javascript" src = "total.js" >
</script>
</head>
<body>
<form id = "myForm" action = "" "alert('Your total cost is $' + totalCost);" />
<label><input type = "checkbox" name = "fruitButton" id = "a" value = ".59" />
Apples </label>
<label><input type = "checkbox" name = "fruitButton" id = "b" value = ".49" />
Bananas </label>
<label><input type = "checkbox" name = "fruitButton" id = "c" value = ".39" />
Oranges </label>
<input type = "submit" name = "submit" onclick = submit; />
</form>
<script type = "text/javascript" src = "total2.js" >
</script>
</body>
</html>
// total.js
// This script illustrates using the focus event
// to prevent the user from changing a text field
var totalCost = 0;
function total()
{
//Which buttons are checked plus costs
var dom = document.getElementById("myForm");
for(var index = 0; index <dom.fruitButton.length; index++)
{
if(dom.fruitButton[index].checked)
{totalCost = totalCost + dom.fruitButton[index].value;}}
}
return totalCost;
// total2.js
// This script illustrates using the focus event
// to prevent the user from changing a text field
var dom = document.getElementById("myForm");
dom.getElementById("a").onclick = total;
dom.getElementById("b").onclick = total;
dom.getElementById("c").onclick = total;
dom.getElementById("myForm").onsubmit = total;
MultiQuote
| 