清除/重置顯示值。在Javascript/HTML中清除回答變量。清除顯示的輸出

Question

我已經在HTML Javascript中創建了一個簡單的成本估算器。它做了一個簡單的計算並顯示答案。按下重置按鈕時，我不知道如何重置答案輸出。

這裏是codepen：http://codepen.io/FredHair/pen/FgJAd

復位按鈕復位形式，但我不無如何重置答案。我知道這是因爲我已經顯示了答案，但不知道清除輸出的正確過程。

HTML：

<div> 
    <h1>Cost Estimator</h1> 
<form> 
<input type= "numbers" id="x" placeholder = "Length" /><br /> 
<input type= "numbers" id="y" placeholder = "Width"/><br /> 
    <input type= "numbers" id="z" placeholder = "Height"/><br /> 

    <select id="choice" > 
    <option value = "1">option 1</option> 
    <option value = "2">0ption 2</option> 
    <option value = "3">option 3</option> 
</select> 
    <br/> 
    <br/> 
<input id= "est" type="button" value = "Estimate" onclick= "calculator()"/> 
<input id= "reset" type="reset" value = "Reset"/> 
</form> 
<h1 id="result"> = </h1> 
    </div> 

JS：

function calculator(){ 
    var x = Number(document.getElementById("x").value); 
    var y = Number(document.getElementById("y").value); 
    var z = Number(document.getElementById("z").value); 
    var p = Number(30); 
    var result; 
var calc = document.getElementById("choice").value 
    switch(calc){ 
     case"1" : result = z * p; 
    break; 
     case"2" : result = x * p + 50; 
    break; 
     case"3" : result = x * p + 30; 
    break;  

} 
document.getElementById("result").innerHTML = " = £ " + result; 
} 

http://codepen.io/FredHair/pen/FgJAd

任何幫助是極大的讚賞。

Answer 1

添加事件偵聽到表單的reset事件：

// document.forms[0] assumes your form is the first in the DOM 
document.forms[0].addEventListener('reset', function() { 
    document.getElementById('result').innerHTML = ''; 
});