Question

我在HTML Javascript中创建了一个简单的Cost Estimator。它做了一个简单的计算并显示答案。按下重置按钮时，我不知道如何重置答案输出。

这是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 = '';
});

清除/重置显示的值。清除Javascript / HTML中的答案变量。清除显示的输出

1 个答案: