图书订单系统自动计算异常：只读输入框未显示计算结果

开发者阿泽

2026-8-18

问题：JavaScript嵌入HTML实现自动计算功能失效

我正在完成一项将JavaScript嵌入HTML的作业，需要实现自动计算功能，让计算结果显示在灰色只读输入框中，但结果始终无法显示。附上我的JavaScript代码与HTML代码，请求排查代码问题。

JavaScript代码

function calculate_Total() {
    document.querySelector('#total_1').value = parseFloat(price_1.value) * parseFloat(qty1.value);
}

const price_1 = document.querySelector('#price_1');
const qty_1 = document.querySelector('#qty_1');

price_1.addEventListener("keyup", (e) => calculate_Total());
qty_1.addEventListener("keyup", (e) => calculate_Total());

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order a book!</title>
    <link rel="stylesheet" href="CSS/book-order.css">
    <script src="JS/book-order.js"></script>
</head>
<body>
    <form>
        <h1>Book Ordering System</h1>
        <table>
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Book Title</th>
                    <th>Author</th>
                    <th>Category</label></th>
                    <th>Unit Price</th>
                    <th>Quantity</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td><input type="text" name="book-title" id="book-title"></td>
                    <td><input type="text" name="author" id="author"></td>
                    <td>
                        <select id="category">
                            <option disabled selected>Please choose a category...</option>
                                <option value="bsn">Business</option>
                                <option value="fic">Fiction</option>
                                <option value="math">Mathematics</option>
                                <option value="tech">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01"/></td>
                    <td><input type="number" name="qty" id="qty_1" min="0" value="0" /></td>
                    <td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" onchange="calculate_Total()" readonly /></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><input type="text" name="book-title" id="book-title"></td>
                    <td><input type="text" name="author" id="author"></td>
                    <td>
                        <select id="category">
                            <option disabled selected>Please choose a category...</option>
                                <option value="bsn">Business</option>
                                <option value="fic">Fiction</option>
                                <option value="math">Mathematics</option>
                                <option value="tech">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calculate_Total()" /></td>
                    <td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calculate_Total()" /></td>
                    <td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly onchange="calculate_Total()"/></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><input type="text" name="book-title" id="book-title"></td>
                    <td><input type="text" name="author" id="author"></td>
                    <td>
                        <select id="category">
                            <option disabled selected>Please choose a category...</option>
                                <option value="bsn">Business</option>
                                <option value="fic">Fiction</option>
                                <option value="math">Mathematics</option>
                                <option value="tech">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
                    <td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
                    <td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><input type="text" name="book-title" id="book-title"></td>
                    <td><input type="text" name="author" id="author"></td>
                    <td>
                        <select id="category">
                            <option disabled selected>Please choose a category...</option>
                                <option value="bsn">Business</option>
                                <option value="fic">Fiction</option>
                                <option value="math">Mathematics</option>
                                <option value="tech">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
                    <td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
                    <td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td><input type="text" name="book-title" id="book-title"></td>
                    <td><input type="text" name="author" id="author"></td>
                    <td>
                        <select id="category">
                            <option disabled selected>Please choose a category...</option>
                                <option value="bsn">Business</option>
                                <option value="fic">Fiction</option>
                                <option value="math">Mathematics</option>
                                <option value="tech">Technology</option>
                        </select>
                    </td>
                    <td><input type="number" name="price" id="price_1" min="0.00" value="0.00" step="0.01" onchange="calc()" /></td>
                    <td><input type="number" name="qty" id="qty_1" min="0" value="0" onchange="calc()" /></td>
                    <td><input type="number" name="total" id="total_1" min="0" value="0.00" step="0.01" readonly /></td>
                </tr>
            </tbody>
            <tfoot>
                <td colspan="5">
                    <div style="text-align: right">
                        <button onclick="calculate();">Calculate Grand Total Price</button>
                    </div>
                </td>
                <td colspan="2">
                    <div style="text-align: right;">
                        <input type="number" name="grand_total" id="grand_total" value="0.00" readonly>
                    </div>
                </td>
            </tfoot>
        </table>
    </form>
<script src="book-order.js"></script>
</body>
</html>

编辑说明

我已修改过部分ID，但目前输入内容时，灰色输入框仍未显示结果。

问题排查与修复方案

1. 变量名拼写错误

calculate_Total函数中使用了qty1.value，但定义的变量是qty_1，缺少下划线导致无法获取输入值，计算结果为NaN无法显示。修正后代码：

document.querySelector('#total_1').value = parseFloat(price_1.value) * parseFloat(qty_1.value);

2. ID重复问题

HTML中所有行的价格、数量、总计输入框ID重复使用price_1、qty_1、total_1，而document.querySelector仅返回第一个匹配元素，导致只有第一行能触发计算，结果也只更新第一行。需给每行元素设置唯一ID：

第1行：price_1、qty_1、total_1
第2行：price_2、qty_2、total_2
第3行：price_3、qty_3、total_3
以此类推。

3. 函数绑定错误与冗余

部分行绑定了未定义的calc()函数，需统一替换为calculate_Total（或为每行编写单独计算函数）。
页面同时在<head>和<body>末尾引入book-order.js，脚本重复加载，建议只保留<body>末尾的引入，确保DOM加载完成后执行脚本。

4. 脚本执行时机问题

原脚本在<head>引入时，DOM元素未加载完成，document.querySelector返回null导致事件绑定失败。可将脚本放在<body>末尾，或添加DOMContentLoaded监听：

document.addEventListener('DOMContentLoaded', function() {
    const price_1 = document.querySelector('#price_1');
    const qty_1 = document.querySelector('#qty_1');

    function calculate_Total() {
        document.querySelector('#total_1').value = parseFloat(price_1.value) * parseFloat(qty_1.value);
    }

    price_1.addEventListener("keyup", calculate_Total);
    qty_1.addEventListener("keyup", calculate_Total);
});

5. 冗余事件绑定移除

总计框为只读状态，不会触发onchange事件，可移除所有总计框的onchange="calculate_Total()"绑定。

内容的提问来源于stack exchange，提问作者A.K. Enoch

图书订单系统自动计算异常：只读输入框未显示计算结果

JavaScript代码 #

HTML代码 #

编辑说明 #

问题排查与修复方案 #

1. 变量名拼写错误 #

2. ID重复问题 #

3. 函数绑定错误与冗余 #

4. 脚本执行时机问题 #

5. 冗余事件绑定移除 #