Javascript: Сброс значения переменной, созданного по форме

Question

Я создал форму, в которой пользователь вводит данные, которые хранятся в переменных или вычисляются в зависимости от пользовательской записи. При нажатии кнопки отображается сообщение с сообщением с переменной стоимости. Форма очищается, но сообщение остается. Проблема в том, что форма обновит стоимость, но не будет обновлять сообщение, чтобы отобразить сообщение об ошибке. Я уверен, что есть что-то простое, что мне не хватает?

* Чтобы понять, что я имею в виду, попробуйте протестировать скрипт: добавьте габариты 20 в каждый размерный блок и зону 2 в следующем окне. нажмите кнопку, и стоимость отобразится до 40 фунтов стерлингов. введите 20 снова в каждом новом окне и на этот раз введите 3 в зоне. Стоимость обновления до 60 фунтов. Однако попробуйте ввести 6 или 7 в поле зоны, и сообщение об ошибке должно показать, но это не так?

Я думаю, что стоимость var хранит предыдущее значение, и поэтому переключатель по умолчанию не запускается? Как сбросить стоимость var? (Я испробовал стоимость = 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(); 
} 

Answer 1

ваш

function resetForm(){ 
document.getElementById("form").reset(); 
} 

должен быть

function resetForm(){ 
document.getElementById("form").reset(); 
msg.innerText=""; 
msg.className=""; 
} 

в принципе: вы не повторно устанавливая #message назад скрытый в котором вы начинаете. И я также уверен, что innerText пуст.

Answer 2

попробуйте изменить

var cost; 

в

var cost=0;