Это домашняя работа для моего урока колледжа по веб-дизайну.
Мой код будет выведен на простой белый фон и позволит пользователю вернуться к форме заказа.Тем не менее, я бы предпочел, чтобы по крайней мере секции заголовка, тела и нижнего колонтитула появлялись (и работали) и записывали вывод в секцию тела.Я попытался использовать document.body.innerHTML, который позволяет одной строке кода появляться на фоне тела.Однако он не позволяет значениям totalBooks или actualDue переходить в это значение и отображаться вообще.Я также попытался использовать document.write.innerHTML, но не смог заставить его работать. ## Заголовок ##
Вот мой код:
<!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>