표시된 값 지우기/재설정 중. 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 = ''; 
});