This is homework for my college Web Design class.
My code will output to a plain, white background, and will allow the user to return to the order form. However, I would prefer to somehow have at least the header, body, and footer sections to appear(and function) & to write the output to the body section. I have tried using document.body.innerHTML, which allows for one line of code to appear on the body's background. However, it does not allow the values of totalBooks or actualDue to pass into this and display at all. I have also tried using document.write.innerHTML, but I could not get it to work either.## Heading ##
Here is my code:
<!doctype html>
<html>
<head>
<title>My Favorite Grimm's Fairy Tales</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/alex-brush:n4:default.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta charset="utf-8">
</head>
<body>
<header>
<h1>My Favorite Grimm's Fairy Tales</h1>
<p> </p>
</header>
<div class="nav">
<ul >
<li ><a href="index.html">HOME</a></li>
<li><a href="thetravelingmusicians.html">THE TRAVELING MUSICIANS</a></li>
<li><a href="thefrogprince.html">THE FROG PRINCE</a></li>
<li><a href="rapunzel.html">RAPUNZEL</a></li>
<li><a href="hanzelandgretel.html">HANZEL & GRETEL</a></li>
<li><a href="orderform.html">BUY BOOKS</a></li>
</ul>
</div>
<aside class="asidesection">
<h1>Buy Books</h1>
<h4>(Hover over the box above the order form to view pricing)</h4>
</aside>
<div class="box5"><p>This fairytales website offers you the opportunity to purchase your very own copy of these tales. The prices are as follows: Hardcover books are $12 each, and Softcover books are $10 each. If your order total exceeds $75, we will give you a 10% discount off your order total.</p>
</div>
<div id="fairytaleCastle-background">
<div id="form-wrapper">
<form action="" method="post" name="math_form">
<h1>
<center>
Order Form
</center>
</h1>
<p> Please enter the number of hardcover and/or softcover copies of the "My Favorite Grimm's Fairy Tales" that you wish to purchase:</p>
<fieldset>
<legend>Entry of Book Order</legend>
<ul>
<li>
<label for="hardcover-books">Harcover Copies</label>
<input name="num1" placeholder="0-999999" type="text" id="num1" size="6" maxlength="6">
</li>
<li>
<label for="softcover-books">Softcover Copies</label>
<input name="num2" placeholder="0-999999" type="text" id="num2" size="6" maxlength="6">
</li>
</ul>
</fieldset>
<p>
<input type="button" name="show_results" value="Click To Show Total Due" onClick="check_the_numbers()" >
<input type="reset" name="Reset" value="Clear form">
</p>
</form>
</div>
</div>
</body>
<script>
function check_the_numbers(){
var numA = document.forms[0].elements.num1.value;
var numB = document.math_form.num2.value;
var error_message = "";
if (numA == "") {
error_message = "You must enter a number in field 1 \n";
}
else if (isNaN(numA)) {
error_message += "Value entered for Hardcover copies is not a number, please try again\n";
}
if (numB == "") {
error_message += "You must enter a number in field 2 \n";
}
else if (isNaN(numB)) {
error_message += "Value entered for Softcover copies is not a number, please try again\n";
}
if (error_message != ""){
alert ("Please correct the following errors: \n_________________________________\n\n" + error_message);
}
else {
do_math( parseInt(numA), parseInt(numB) );
}
}
function do_math(numA,numB) {
var totalBooks = numA + numB;
var totalDue = (numA*12) + (numB*10);
var cutoff = 75;
var actualDue =(totalDue>cutoff) ? (totalDue-(totalDue*.10)):totalDue;
document.write("<h3> The total books ordered is " + totalBooks +"</h3>");
document.write("<h3> The total due is $" + actualDue +"</h3>");
document.write("<a href=JavaScript:history.back();>Click here to go back</a>");
}
</script>
<body>
</body>
<footer>
<div class="nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="thetravelingmusicians.html">THE TRAVELING MUSICIANS</a></li>
<li><a href="thefrogprince.html">THE FROG PRINCE</a></li>
<li><a href="rapunzel.html">RAPUNZEL</a></li>
<li><a href="hanzelandgretel.html">HANZEL & GRETEL</a></li>
<li><a href="orderform.html">BUY BOOKS</a></li>
</ul>
</div>
</footer>
</html>
