Javascript:重置表单创建的变量值

我创建了一个表单，用户可以在其中输入存储在变量中或根据用户输入计算的详细信息。单击该按钮时，将显示一条消息，显示带有成本变量的消息。表单将清除，但消息仍然存在。我遇到的问题是表单将更新成本值，但不会更新消息以显示错误消息。我确定我缺少一些简单的东西？

*要理解我的意思，请通过以下方式测试小提琴：在每个维度框中添加维度 20，在下一个框中添加区域 2。 单击该按钮，费用将显示为 40 英镑。 在每个新框中再次输入 20，这次在区域中输入 3。费用更新为 60 英镑。但是，尝试在区域框中输入 6 或 7，应该会显示错误消息，但没有？

我认为 var 成本存储了以前的值，因此默认开关不会触发？如何重置成本变量？（我最后尝试了 cost=null，但它不起作用;保持相同的 msg 并读取 £null）。

http://jsfiddle.net/6dxLou41/

对不起，代码太长了。希望这是有道理的。

.html

<form id="form">
<input type="text" name="data" id="length" maxlength="4"/>Length (cm)
<input type="text" name="data" id="width" maxlength="4"/>Width (cm)
<input type="text" name="data" id="height" maxlength="4"/>Height (cm)<br>           
<input type="text" name="data" id="zone" maxlength="4"/>Zone<br><br>
<button type="button" id="click_button">click</button>
</form>
<div id="message"></div>

.CSS

#message {
visibility:hidden;
}
#message.show {
visibility:visible;  
}

.JS

var cost;
var button=document.getElementById("click_button");
var msg=document.getElementById("message");
function load(){
button.addEventListener("click",getSize, false);
}
window.onload=load();
function getSize(){
var length=document.getElementById("length").value;
var width=document.getElementById("height").value;
var height=document.getElementById("height").value;
var zone=document.getElementById("zone").value;
    function checkSize(){
           if (length<50 && width<50 && height<50) {
               smallBox(zone);
               }
           else if (length>=50 && width>=50 && height>=50) {
               largeBox(zone);
               }
     }
checkSize();
}
           function smallBox(zone){
               switch(zone){
               case "1":
                   cost=20;
               break;
               case "2":
                   cost=40;
               break;
               case "3":
                   cost=60;
               break;
               default:
                   errorMsg();
               break;
               }
               if(!isNaN(cost)){
               showMsg();
               }
            }
           function largeBox(zone){
               switch(zone){
               case "1":
                   cost=40;
               break;
               case "2":
                   cost=60;
               break;
               case "3":
                   cost=80;
               break;
               default:
                   errorMsg();
               break;
               }
               showMsg();
            }
function errorMsg(){
msg.innerText="Error. Please check the details entered and try again"; 
msg.className="show";
resetForm();
}
function showMsg(){
msg.innerText="Thank you. The cost will be £" + cost;
msg.className="show";
resetForm();
}
function resetForm(){
document.getElementById("form").reset();
}