Javascript 构建一个简单的计算器

我对Javascript相当陌生，目前正在开发一个简单的计算器，允许用户回答几个问题，以计算他们的总价。价格将显示在表格下方的DIV中。但是，我遇到的问题是，在选择最后一个选项之前，div中的输出是NaN

代码并不完美，因为我只是在测试这一点，但这里的HTML

const looks=document.getElementById（'looks'）；
const edits=document.getElementById（'edits'）；
constudio=document.getElementById（'studio'）；
const total=document.getElementById（'total'）；
常量btn=document.getElementById（'btn'）
looks.addEventListener（'change'，totalCost）；
编辑。addEventListener（“变更”，总成本）；
studio.addEventListener（“变更”，总成本）；
btn.addEventListener（“点击”，总成本）；
函数totalCost（）{
total.innerText=（looks.value*100）
+（编辑值*50）
+parseInt（studio.value）；
}

你看了多少？
有多少编辑？
地点：
现场
演播室里
总数：

您在

studio中遇到了一个问题。value

，对于第一次初始化，它的值为NaN，您需要检查参数是否为数字，然后再进行计算或将其转换为数字，如以下示例所示：

const looks=document.getElementById（'looks'）；
const edits=document.getElementById（'edits'）；
constudio=document.getElementById（'studio'）；
const total=document.getElementById（'total'）；
常量btn=document.getElementById（'btn'）
looks.addEventListener（'change'，totalCost）；
编辑。addEventListener（“变更”，总成本）；
studio.addEventListener（“变更”，总成本）；
btn.addEventListener（“点击”，总成本）；
函数totalCost（）{
设stdValue=parseInt（studio.value）；
if（isNaN（stdValue））{
std值=0；
}
total.innerText=（（looks.value*100）
+（编辑值*50）
+标准值）；
}

你看了多少？
有多少编辑？
地点：
现场
演播室里
总数：

这样

const
myForm=document.getElementById（'my-form'）
，total=document.getElementById（'total'））
;
myForm.oninput=evt=>
{
total.textContent=（myForm.looks.valueAsNumber*100）
+（myForm.edits.valueAsNumber*50）
+（parseInt（myForm.studio.value）| | 0）
}
myForm.onsubmit=evt=>//大于btn.onclick
{
evt.preventDefault（）//停止表单提交
}

你看了多少？
有多少编辑？
地点：
现场
演播室里
总数：
? 
提交

将选项中的值设置为0会更直接一些：

在位置上

@NickParsons您是对的，我同意您的看法……如果该值为零，是否有其他方法来设置该特定选项的价格？