html calculated field not accepting an empty field - html

Question

I am currently trying to get my calculated fields to show a total in a bottom field but in order for that to happen I have to have a value in each field. I am lost on how to get it to work with an empty field being accepted without an error. This is what i have so far:
<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

I have removed eval from the sum and it works on tab out
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>