这是我大学网页设计课的家庭作业。
我的代码将输出为纯白色背景，并允许用户返回订单。但是，我更愿意以某种方式至少让页眉、正文和页 footer 分出现(和运行)并将输出写入正文部分。我试过使用 document.body.innerHTML，它允许一行代码出现在主体的背景上。但是，它根本不允许将 totalBooks 或 actualDue 的值传入其中并显示。我也尝试过使用 document.write.innerHTML，但我也无法让它工作。## Heading ##
这是我的代码:
<!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>
最佳答案
要显示页眉、页脚、函数、正文的其余部分和函数的输出，最好有一个单独的部分专门用于输出。当您点击按钮时，它应该计算结果并显示在该部分。
我在这里为您的代码创建了一个工作示例 -> https://jsfiddle.net/nrft1nu8/8/
我添加了一个新的 div，其中 id 作为 result，我在其中显示结果。此外，我已经阻止了表单的默认行为(默认行为 - 它在提交时刷新页面)。
希望这对您有所帮助。
关于javascript - 试图让我的输出显示在正文部分，格式包括页眉、正文(带背景)和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50557949/