清除/重置顯示的值。 清除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 = '';
});