如何用JavaScript检测提交按钮点击并修复订单总价计算问题

原代码存在以下问题导致无法正确显示总价：

• 仅计算了第一种披萨的金额，未累加其他披萨的总价
• 使用错误的方式设置总价输入框内容（write()方法不适用于input元素）
• 仅通过点击总价输入框触发计算，不符合“填写数量后自动显示”的需求
• 未将输入的字符串数量转换为数字，可能引发计算异常

以下是修正后的完整代码：

<h1>Vente de Pizza</h1>
<form method="post" action="#">
    Nom du client<input type="text" name="nom" /> <br> <BR></BR>
    adresse<input type="text" name="adresse" /><br>
    <h1>Produits à acheter</h1>
    <table border = "1">
        <tr><th>Nom du produit</th>
            <th>Prix unitaire</th>
            <th>Quantité</th>
        </tr>
        <tr>
            <td>Pizza 4 fromages</td>
            <td>80</td>
            <td><input type="text" name="QTE1" id = "x1" /></td>
        </tr>
        <tr>
            <td>Pizza Herbo</td>
            <td>75</td>
            <td><input type="text" name="QTE2" id = "x2"/></td>
        </tr>
        <tr>
            <td>Pizza viande hachée</td>
            <td>100</td>
            <td><input type="text" name="QTE3" id = "x3"/></td>
        </tr>
        <tr>
            <td>Pizza Fruit de mer</td>
            <td>120</td>
            <td><input type="text" name="QTE4" id = "x4"/></td>
        </tr>
    </table>
     <p font = "bold" style="font-weight: BOLD;"> Paiment par: </p><br>
     <input type="radio" name="banque" id="">Carte bancaire
     <input type="radio" name="banque" id="">Chèque <BR></BR>
        Numéro de la carte bancaire<input type="text" name="numCB" id = "x5" style="width: 400px;"/> <br><BR>
    <button class="btn" type="submit"  onkeydown = "mySubmit()" id ="bouton">Envoyer</button> <BR></BR>
    Merci de votre visite le montant total de votre commande est : 
    <input type="text" name="Total" id = "Total" readonly/> 
    <script>
        // 获取所有数量输入框和总价输入框
        const quantityInputs = [document.getElementById('x1'), document.getElementById('x2'), document.getElementById('x3'), document.getElementById('x4')];
        const totalInput = document.getElementById('Total');
        
        // 定义各披萨单价
        const prices = [80, 75, 100, 120];
        
        // 计算总价的函数
        function calculateTotal() {
            let total = 0;
            quantityInputs.forEach((input, index) => {
                // 将输入值转为数字，空值或非数字视为0
                const quantity = parseInt(input.value) || 0;
                total += quantity * prices[index];
            });
            // 设置总价输入框的值
            totalInput.value = total;
        }
        
        // 给每个数量输入框添加input事件监听，实时计算
        quantityInputs.forEach(input => {
            input.addEventListener('input', calculateTotal);
        });
    </script>
</form>

关键修改说明：

1. 实时触发计算：给所有数量输入框添加input事件监听，用户输入或修改数量时自动触发总价计算
2. 完整计算逻辑：遍历所有披萨的数量和单价，累加得到总金额
3. 类型转换处理：将输入的字符串数量转为整数，空值或非数字内容视为0，避免计算错误
4. 正确设置总价：通过value属性设置总价输入框的内容，替代错误的write()方法
5. 总价输入框只读：添加readonly属性，防止用户手动修改总价

内容的提问来源于stack exchange，提问作者Nizar El aouina