Question

这是我大学网页设计课的作业我的代码将输出到纯白色背景，并允许用户返回订单。但是，我宁愿以某种方式至少有标题，正文和页脚部分出现（和功能）＆amp;将输出写入正文部分。我尝试过使用document.body.innerHTML，它允许一行代码出现在body的背景上。但是，它不允许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>&nbsp;</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>

Answer 1

为了显示页眉，页脚，功能，主体的其余部分和功能的输出，它有一个单独的部分仅用于输出。当您单击按钮时，它应计算结果并显示在该部分中。

我在这里创建了一个代码的工作示例 - ＆gt; https://jsfiddle.net/nrft1nu8/8/

我添加了一个div id result作为try { currentCon = ConnectionManager.getConnection(); psParent=currentCon.prepareStatement("insert into accommodation (type,name,price,description,username)values(?,?,?,?,?)", PreparedStatement.RETURN_GENERATED_KEYS); psParent.setString(1,type); psParent.setString(2,name); psParent.setFloat(3,price); psParent.setString(4,username); psParent.executeUpdate(); accid= 0; rs = psParent.getGeneratedKeys(); if (rs.next()) accid = rs.getInt(1); rs.close(); psParent.close(); psChild=currentCon.prepareStatement("insert into room (accid, bed)values(?,?)"); psChild.setInt(1,accid); psParent.setString(2,bed); psChild.executeUpdate(); }我正在显示结果。另外，我已经阻止了表单的默认行为（默认行为 - 它在提交时刷新页面。）

希望这有帮助。

试图让我的输出显示在正文部分，格式化包括标题，正文（带背景），＆amp;页脚

1 个答案: