HTML 计算字段不接受空字段

Question

我目前正在尝试让我的计算字段在底部字段中显示总计，但为了实现这一点，我必须在每个字段中都有一个值。我不知道如何让它在一个空字段被接受而没有错误的情况下工作。这是我到目前为止所拥有的：

<script type="text/javascript">
function update()
{
var form = document.forms[0];
var sum = eval(form.x.value)*60 + eval(form.y.value)*110 + eval(form.z.value)*180;
form.sum.value = isNaN(sum) ? "" : sum;
}
</script>
<form name="form1" onsubmit="false">
<fieldset>
<legend>Bloodwood</legend>
<label for="f1">Vault ($60)</label>
<input id="f1" name="x" type="number" onchange="update()"> 
<label for="f2">Tray ($110)</label>
<input id="f2" name="y" type="number" onchange="update()">
<label for="f3">Tower ($180)</label>
<input id="f3" name="z" type="number" onchange="update()">
<label for="f4">Total</label>
<input id="f4" name="sum" readonly="readonly">
</fieldset>
</form>

Answer 1

我已经从总和中删除了 eval，它可以在选项卡外工作

function update()
{
var form = document.forms[0];
var sum = form.x.value*60 + form.y.value*110 + form.z.value*180;

form.sum.value = isNaN(sum) ? "" : sum;
}

<form name="form1" onsubmit="false">
<fieldset>
<legend>Bloodwood</legend>
<label for="f1">Vault ($60)</label>
<input id="f1" name="x" type="number" onchange="update()"> 
<label for="f2">Tray ($110)</label>
<input id="f2" name="y" type="number" onchange="update()">
<label for="f3">Tower ($180)</label>
<input id="f3" name="z" type="number" onchange="update()">
<label for="f4">Total</label>
<input id="f4" name="sum" readonly="readonly">
</fieldset>
</form>