Javascript 订购表格连同

我试图制作一个订单，将从不同小部件类型中选择的值相加，提交时没有输出。我不确定我是做对了还是走错了方向？我试图选择值的方式是否实际适用于if语句，或者是否有其他方法选择值

var size=document.getElementById（'pizzaSize'）.value；
if（document.getElementById（'pepperoni'）。选中）{
var pepperoni=1.50；
}
if（document.getElementById（'mulls'）。选中）{
var=1.50；
}
if（document.getElementById（'peppers'）。选中）{
辣椒变异系数=1.50；
}
if（document.getElementById（'pesto'）。选中）{
var pesto=2.00；
}
函数totalPizza（）{
var total=parseInt（大小+辣香肠+蘑菇+辣椒+香蒜酱）；
var tax=parseInt（总计*'.10'）；
var totalPlusTax=parseInt（总计+税费）；
document.getElementById（“总计”）.innerHTML=“小计：”+总计；
document.getElementById（“税”）.innerHTML=“销售税：”+税；
document.getElementById（“totalTax”）.innerHTML=“Total:+totalPlusTax；
}

比萨饼订单
名称




比萨饼大小

个人

小的

中等

大的



地壳类型

稀薄的
有规律的
平底锅
塞满的



浇头：

意大利 辣味 香肠


蘑菇


青椒


香蒜酱



下单

使用

onclick=“totalPizza（）”

而不是

onsubmit

onsubmit

是用于

torm

标记的事件，而不是

按钮

要使代码按预期工作，您需要做几件事

将Submit上的

移动到
表单（）

您不希望表单被提交，因此需要使用停止提交

您有多个具有相同id的元素。您应该避免使用它，并且您确实不需要它。要获取单选按钮列表的值，请搜索

：选中的一个按钮并获取其值（）

将所有逻辑移到函数中，这样每次单击都会计算所有输入

税收计算也有一点变化

披萨
比萨饼订购单
名称




比萨饼大小

个人

小的

中等

大的



地壳类型

稀薄的
有规律的
平底锅
塞满的



浇头：

意大利 辣味 香肠


蘑菇


青椒


香蒜酱



下单



函数（e）{
e、 预防默认值（）；
var size=document.querySelector（'input[name=“size”]：checked'）。值；
if（document.getElementById（'pepperoni'）。选中）{
var pepperoni=1.50；
}
if（document.getElementById（'mulls'）。选中）{
var=1.50；
}
if（document.getElementById（'peppers'）。选中）{
辣椒变异系数=1.50；
}
if（document.getElementById（'pesto'）。选中）{
var pesto=2.00；
}
var total=parseInt（大小+辣香肠+蘑菇+辣椒+香蒜酱）；
风险值税=（总计*0.1）。固定（2）；
var totalPlusTax=总额+税金；
document.getElementById（“总计”）.innerHTML=“小计：”+总计；
document.getElementById（“税”）.innerHTML=“销售税：”+税；
document.getElementById（“totalTax”）.innerHTML=“Total:+totalPlusTax；
}

有关以下更改，请参考下面的示例：

将

onsubmit

属性从按钮移动到表单元素

您不需要独立的if语句来设置值，只需迭代输入并查找

checked

state即可

用于留在页面上（并防止其离开/重新加载页面）

与捕获小数相对使用

使用格式化结果以解决浮点运算的问题--注意：这不是一个完整的解决方案，但解决了演示中过于简单的问题。解决/缓解潜在的浮点数学问题需要一个更复杂的库

使用“$”表示货币价值

（有关其他更改，请参见底部）

函数totalPizza（）{
event.preventDefault（）//防止表单切换页面
设小计=0
让输入=document.querySelectorAll（'输入，选择'）
inputs.forEach（输入=>{
如果（输入。选中）
小计+=parseFloat（输入值）
})
让税=浮动（小计*'.10'）；
合计=浮动（小计+税金）；
document.querySelector（“#小计”）.innerHTML=“小计：$”+小计.toFixed（2）；
document.querySelector（“#tax”）.innerHTML=“销售税：$”+tax.toFixed（2）；
document.querySelector（“#totalTax”）.innerHTML=“Total:$”+Total.toFixed（2）；
}

标签{
显示：块；
}
.mt-1{
页边顶部：1rem；
}
.行{
显示器：flex；
}
上校{
保证金：0.2rem；
}

比萨饼订单
名称
披萨大小
个人的
小的
中等
大的
地壳类型
稀薄的
有规律的
平底锅
塞满的
浇头：
意大利 辣味 香肠
蘑菇
青椒
香蒜酱
下单

谢谢，我就是这么想的。”let inputs=document.querySelectorAll（'input，select'）是我一直在寻找但找不到的内容，我将对表单进行这些更改。我也没有听说过event.preventDefault（），我只知道使用action=“#”尝试在表单提交后不刷新页面。我需要更新答案中的描述。该方法停止本机事件操作，即