如何为表单Javascript中的选择指定数值

我正在尝试构建一个表单，允许用户订购比萨饼，并在用户制作比萨饼时显示发票

我已经成功地获得了用户选择显示的选项，但是我不知道如何为这些选项指定价格。理想情况下，我希望为尺码指定一个价格，最终在选择三种浇头（和优质浇头）后确定一个价格。 我还遇到了一个问题，即只有函数sizeOfPizza是唯一的函数时，发票才会填写。添加其他Javascript将否定这一点

//显示比萨饼大小的选择
函数SizeOffpizza（大小）{
document.getElementById（“pizzaSize”）。值=大小；
}
//显示器尺寸和价格的选择
函数确定价格（大小）{
document.getElementById（“pizzaSizePrice”）。值=？？？？
如果（option.value==“个人”）{
var pizzaSizePrice=5
}否则如果（option.value==“中等”）{
var pizzaSizePrice=8
}else if（option.value==“大”）{
var pizzaSizePrice=10
}else if（option.value==“超大”）{
var pizzaSizePrice=12
}else if（option.value==“神圣比萨饼”）{
var pizzaSizePrice=20
}
}

选择大小
个人（4片）

中等（8片）

大的（10片）

超大（12片）

圣披萨蝙蝠侠（24片）




披萨大小：
披萨大小价格：

以下是一些更好的做法

请注意，您的脚本存在个人（小写）拼写错误、缺少

和其他问题

const价格={
“个人”：5，
“中等”：8，
“大”：10，
“超大”：12，
“神圣披萨”：20
}
addEventListener（“加载”，函数（）{//当页面加载时
document.getElementById（“pizza size”）.addEventListener（“click”，函数（e）{//传递事件-在本例中为click事件
var tgt=e.target；//单击了什么
如果（tgt.name==“size”）{//，它是其中一个收音机吗？
var val=tgt.value；//保存一次值（干燥原则）
document.getElementById（“pizzaSize”）.value=val；
document.getElementById（“pizzaSizePrice”）.value=prices[val]；//在prices对象中查找价格
}
})
})

选择大小
个人（4片）

中等（8片）

大的（10片）

超大（12片）

圣披萨蝙蝠侠（24片）


比萨饼尺寸：

披萨大小价格：

同一元素属性不能有两次（

onclick

）。另外，

=var sizePrice

是一个语法错误。我为您制作了一个代码片段并格式化了代码。修复控制台错误

document.getElementById（“pizzaSizePrice”）。value=var sizePrice

无效。还有一个，谢谢！我还没有学会const（或let），我将尝试使用它来更好地理解它！然后使用var.const只是为了表明它在脚本执行期间没有改变