网页设计作业：订单计算结果需在页面主体区域带格式显示

我明白你的痛点——用document.write会直接清空整个页面，把header、footer这些布局全搞没了，而直接替换document.body.innerHTML又会干掉原来的表单和导航。咱们换个思路，专门给结果加个容器，把计算结果插入到这个容器里，而不是替换整个页面内容。

具体步骤： #

• 添加结果容器：在订单表单后面新增一个空<div>，默认隐藏，计算完成后再显示结果
• 修改JS函数：放弃document.write，转而获取容器并插入结果HTML
• 修复HTML错误：你的代码里有重复的<body>标签，这是无效的，得删掉多余的那个

修改后的完整代码： #

<!doctype html>
<html>
<head>
    <title>My Favorite Grimm's Fairy Tales</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
    <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 id="order-results" style="display: none; margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; background: #f9f9f9;"></div>
        </div>
    </div>
    <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>
                <!-- 保留原代码现有内容 -->
            </ul>
        </div>
    </footer>

    <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;

            // 获取结果容器
            var resultContainer = document.getElementById('order-results');
            
            // 构建结果HTML，优化格式并添加重置按钮
            var resultHTML = `
                <h3>Order Summary</h3>
                <p><strong>Total books ordered:</strong> ${totalBooks}</p>
                <p><strong>Total due:</strong> $${actualDue.toFixed(2)}</p>
                <button onclick="resetOrder()" style="padding: 8px 16px; cursor: pointer;">Place Another Order</button>
            `;
            
            // 插入结果并显示容器
            resultContainer.innerHTML = resultHTML;
            resultContainer.style.display = 'block';
        }

        // 新增重置函数，隐藏结果并清空表单
        function resetOrder() {
            document.math_form.reset();
            document.getElementById('order-results').style.display = 'none';
        }
    </script>
</body>
</html>

关键改进说明： #

1. 避免页面覆盖：用独立容器order-results展示结果，完全保留header、footer和原表单结构
2. 用户体验优化：结果默认隐藏，计算后自动显示，新增重置按钮方便用户再次下单
3. 细节完善：用toFixed(2)确保金额显示两位小数，符合电商场景的格式要求
4. 代码合法性：修复了重复<body>标签的错误，保证页面结构符合HTML规范

内容的提问来源于stack exchange，提问作者J.Speer