JS蛋糕订单计算功能异常：无法输出小计、税费及总计结果

我帮你找出了代码里导致功能失效的几个核心问题，同时给出了修复后的完整代码，细节如下：

问题分析 #

• DOM对象拼写错误：代码里多次把document误写为documemt，这会直接导致无法获取页面元素，计算结果根本没法更新到对应的输入框中。
• 税费计算逻辑错误：税费的正确计算方式是小计金额 × 税率（subTotal * TAXRATE），而你写成了subTotal + TAXRATE，这会把税率数值直接加到小计上，完全不符合税费的计算逻辑。
• 表单提交失败：placeOrder函数里直接调用form.submit()，但没有先获取到页面中的表单元素，浏览器无法识别这个form对象，导致点击“Place order”按钮后无法提交表单。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<title>Decent Confenctionery</title>
<script type="text/javascript">
function updateOrder() {
 const TAXRATE=0.33;
 const CAKEPRICE=300;
 // 修正document拼写错误
 var numVanilaCake= parseInt(document.getElementById("vanilaCake").value);
 var numChocoCake= parseInt(document.getElementById("chocoCake").value);
 var subTotal= (numVanilaCake+numChocoCake)* CAKEPRICE;
 // 修正税费计算逻辑：小计 × 税率
 var tax= subTotal * TAXRATE;
 var total=subTotal+tax;
 // 修正document拼写错误，同时用toFixed(2)保留两位小数，让金额显示更规范
 document.getElementById("sub_Total").value=subTotal.toFixed(2);
 document.getElementById("tax_a").value=tax.toFixed(2);
 document.getElementById("total_a").value=total.toFixed(2);
}
function placeOrder() {
 // 获取页面中的表单元素后再调用submit方法
 document.querySelector('form').submit();
}
</script>
</head>
<body>
<h1>DECENT CAKE CONFENCTIONERY</h1>
<p id="asd">ONLINE CAKE ORDERING SYSTEM</p>
<p>All cakes 300Rs. each, Vanilla,Chocolate</p>
<form>
<label>Customer Name:</label>
<input type="text" name="" required placeholder="Enter your name"><br><br>
<label>Mobile No.:</label><input type="number" name="" required placeholder="Enter your Mobile number"><br><br>
<label># of vanilaa cake:</label>
<input type="number" name="vanilaCake" required placeholder="No. of cakes" onchange="updateOrder();" id="vanilaCake"><br><br>
<label># of chocolate cake:</label>
<input type="number" name="chocoCake" required placeholder="No. of cakes" onchange="updateOrder();" id="chocoCake" /><br><br>
<label>Subtotal </label><input type="text" name="" id="sub_Total"><br>
<br>
<label>Tax: </label><input type="text" name="" id="tax_a"><br><br>
<label>Total: </label><input type="text" name="" id="total_a"><br><br>
<button style="cursor: pointer;" onclick="placeOrder();">Place order</button>
</form>
</body>
</html>

额外说明：我在金额赋值时添加了toFixed(2)方法，用来保留两位小数，让金额显示更符合日常的货币展示规范，你可以根据需求调整这个参数。

内容的提问来源于stack exchange，提问作者jatin sehra