Tweet
I'm about three weeks into a programming course. The script below is supposed to display the total $ when the submit button is clicked. Instead of running the javascript, it displays it at the bottom of the browser page in text. It's done it on two versions of ie and on firefox. My instructor hasn't been any help. What am I missing?
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<!-- e54.html
A solution to Exercise 5.4
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Exercise 5.4 </title>
<script type = "text/javascript" src = "e54.js" >
</script>
</head>
<body>
<h3> Order Form </h3>
<form name = "orderForm" onSubmit = "finish()">
<p>
<label> <input type = "text" name = "apples"
size = "3"
onChange = "appleHandler()" />
Apples
</label>
</p><p>
<label> <input type = "text" name = "oranges"
size = "3"
onChange = "orangeHandler()" />
Oranges
</label>
</p><p>
<label> <input type = "text" name = "bananas"
size = "3"
onChange = "bananaHandler()" />
Bananas
</label>
</p><p>
<input type = "reset" name = "Clear Order Form" />
<input type = "submit" name = "Submit Order" />
</p>
</form>
</body>
</html>
// e54.js - The JavaScript file for the solution
// to Exercise 5.4
var total = 0
// The event handler functions for the text boxes
function appleHandler() {
var number = document.orderForm.apples.value;
total = total + number * 0.59;
}
function orangeHandler() {
var number = document.orderForm.oranges.value;
total = total + number * 0.49;
}
function bananaHandler() {
var number = document.orderForm.bananas.value;
total = total + number * 0.39;
}
// The event handler function to produce the total cost message
// when "submit" is clicked
function finish() {
total = total * 1.05;
alert("Thank you for your order \n" +
"Your total cost is: $" + total + "\n");
}
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
<!-- e54.html
A solution to Exercise 5.4
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Exercise 5.4 </title>
<script type = "text/javascript" src = "e54.js" >
</script>
</head>
<body>
<h3> Order Form </h3>
<form name = "orderForm" onSubmit = "finish()">
<p>
<label> <input type = "text" name = "apples"
size = "3"
onChange = "appleHandler()" />
Apples
</label>
</p><p>
<label> <input type = "text" name = "oranges"
size = "3"
onChange = "orangeHandler()" />
Oranges
</label>
</p><p>
<label> <input type = "text" name = "bananas"
size = "3"
onChange = "bananaHandler()" />
Bananas
</label>
</p><p>
<input type = "reset" name = "Clear Order Form" />
<input type = "submit" name = "Submit Order" />
</p>
</form>
</body>
</html>
// e54.js - The JavaScript file for the solution
// to Exercise 5.4
var total = 0
// The event handler functions for the text boxes
function appleHandler() {
var number = document.orderForm.apples.value;
total = total + number * 0.59;
}
function orangeHandler() {
var number = document.orderForm.oranges.value;
total = total + number * 0.49;
}
function bananaHandler() {
var number = document.orderForm.bananas.value;
total = total + number * 0.39;
}
// The event handler function to produce the total cost message
// when "submit" is clicked
function finish() {
total = total * 1.05;
alert("Thank you for your order \n" +
"Your total cost is: $" + total + "\n");
}
Comment