title: Javascript form validation using innerHTML text won't disappear
body: <p>On my html form, when a field is left blank and Javascript executes, an error message is shown using innerHTML. However, after an allowed input is used for that field, with another field being blank, the message won't disappear. If I refresh the page all of the information in the fields stay but the innerHTML message disappears. Is there a way to make the error message disappear after clicking the calculate button and Javascript executes? Like having it recheck and take the message away somehow.</p>
  
  <p>Here's my html code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /&gt;
      &lt;title&gt;The Happy Hoppin' Hotel&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="happyhoppin_skeleton.css" /&gt;
      &lt;script src="happyhoppin_skeleton.js" language="javascript" type="text/javascript"&gt;&lt;/script&gt; 
    &lt;/head&gt;
      &lt;body&gt;
          &lt;form&gt;
              &lt;h1&gt;The Happy Hoppin' Hotel Checkout Page&lt;/h1&gt;
              &lt;p&gt;Fill out the form below to calculate balance due&lt;/p&gt;
              Guest ID Number: &lt;input type="text" id="custID" /&gt;&lt;div id="guestID"&gt; &lt;/div&gt;
              Room Type: 
              &lt;select id="roomType" /&gt;
                  &lt;option&gt;&lt;/option&gt;
                  &lt;option&gt;Double&lt;/option&gt;
                  &lt;option&gt;Single&lt;/option&gt;
                  &lt;option&gt;Parlor&lt;/option&gt;
              &lt;/select&gt;&lt;div id="room"&gt; &lt;/div&gt;
              Length of Stay: &lt;input type="text" id="stayLength" name="" /&gt;&lt;div id="stay"&gt; &lt;/div&gt;
              Number of Drinks: &lt;input type="text" id="drinkNum" name="" /&gt;&lt;div id="drink"&gt; &lt;/div&gt;
              Number of Towels: &lt;input type="text" id="towelNum" name="" /&gt;&lt;div id="towel"&gt; &lt;/div&gt;
              Number of Flushes: &lt;input type="text" id="flushNum" name="" /&gt;&lt;div id="flush"&gt; &lt;/div&gt;
              Bug Complaints?:  &lt;label&gt;&lt;br&gt;
              &lt;input type="radio" id="radio" name="bugComplaint" value="Yes" onclick="getCheckedRadio(this)" /&gt;Yes&lt;br&gt;
              &lt;input type="radio" id="radio" name="bugComplaint" value="No" onclick="getCheckedRadio(this)" /&gt;No
  
              &lt;div id="comments"&gt;Customer Comments: 
              &lt;textarea name="customerComment" id="comments" onFocus="this.value=''" value="Make me disappear" cols="50" rows="5"&gt;Enter your comments here...&lt;/textarea&gt; 
              &lt;/div&gt;
              &lt;input type="button" onclick="calculateFinalBill()" value="Calculate"&gt;
          &lt;/form&gt;
      &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my Javascript code:</p>
  
  <pre><code>const doublePrice = 150;
  const singlePrice = 100;
  const parlorPrice = 80;
  const drinkPrice = 5;
  const towelPrice = 3;
  const flushPrice = 1;
  
  var custID;
  var roomPrice;
  var stayLength;
  var drinkNum;
  var towelNum;
  var flushNum;
  var totalDue;
  var subtotal;
  var roomType;
  var bugDiscount;
  
  function calculateFinalBill() {
      validateForm();
      if(roomType == "Double"){
      roomPrice = doublePrice;
      }
  
      if(roomType == "Single"){
      roomPrice = singlePrice;
      }
  
      if(roomType == "Parlor"){
      roomPrice = parlorPrice;
      }
  
      roomTotal = roomPrice * stayLength
  
      towelTotal = towelPrice * towelNum
  
      flushTotal = flushPrice * flushNum
  
      drinkTotal = drinkPrice * drinkNum
  
      subtotal = roomTotal + towelTotal + flushTotal + drinkTotal
  
      totalDue = subtotal - bugDiscount
  
      displayBill();
  }
  
  function getCheckedRadio(which){
  var bugValue = which.value;
      if (bugValue == "No"){
      bugDiscount = 0;
      }
      if (bugValue == "Yes"){
      bugDiscount = 20;
      }
  }
  
  function validateForm(){
  custID = parseInt(document.getElementById("custID").value);
  if(isNaN(custID)){
      document.getElementById('guestID').innerHTML="*Guest ID must be a number"
      throw "stop execution";
  }
  
  if(custID &lt;= 0){
      document.getElementById('guestID').innerHTML="*Guest ID must be greater than zero"
      throw "stop execution";
  }
  
  roomType = document.getElementById("roomType").value;
  if(roomType == ""){
      document.getElementById('room').innerHTML="*Room type must be selected"
      throw "stop execution";
  }
  
  stayLength = parseInt(document.getElementById("stayLength").value);
  if(isNaN(stayLength)){
      document.getElementById('stay').innerHTML="*Length of Stay must be a number"
      throw "stop execution";
      }
  if(stayLength &lt; 0){
      document.getElementById('stay').innerHTML="*Length of Stay must be greater than zero"
      throw "stop execution";
  }
  
  drinkNum = parseInt(document.getElementById("drinkNum").value);
  if(isNaN(drinkNum)){
      document.getElementById('drink').innerHTML="*Number of Drinks must be a number"
      throw "stop execution";
      }
  if(drinkNum &lt; 0 || drinkNum &gt; 25){
      document.getElementById('drink').innerHTML="*Number of Drinks must be 0-25"
      throw "stop execution";
  }
  
  towelNum = parseInt(document.getElementById("towelNum").value);
  if(isNaN(towelNum)){
      document.getElementById('towel').innerHTML="*Number of Towels must be a number"
      throw "stop execution";
      }
  if(towelNum &lt; 0){
      document.getElementById('towel').innerHTML="*Number of Towels must be zero or greater"
      throw "stop execution";
  }
  
  flushNum = parseInt(document.getElementById("flushNum").value);
  if(isNaN(flushNum)){
      document.getElementById('flush').innerHTML="*Number of Flushes must be a number"
      throw "stop execution";
      }
  if(flushNum &lt; 0){
      document.getElementById('flush').innerHTML="*Number of Flushes must be zero or greater"
      throw "stop execution";
  }
  
  customerComment = document.getElementById("customerComment");
  }
  
  function displayBill(){
  var newPage =  "&lt;html&gt;&lt;head&gt;&lt;title&gt;Billing Summary&lt;/title&gt;&lt;/head&gt;"; //Add CSS after title
      newPage += "&lt;body&gt;&lt;h1&gt;Happy Hoppin Hotel&lt;/h1&gt;";
      newPage += "&lt;h2&gt;Guest Billing Summary&lt;/h2&gt;";
      newPage += "Guest Identification: " + custID;
      newPage += "&lt;br /&gt;";
      newPage += "Room Type: " + roomType;
      newPage += "&lt;br /&gt;";
      newPage += "Length of Stay: " + stayLength;
      newPage += "&lt;br /&gt;";
      newPage += "Room Charge: $" + roomTotal;
      newPage += "&lt;br /&gt;";
      newPage += "Drink Charge: $" + drinkTotal;
      newPage += "&lt;br /&gt;";
      newPage += "Towel Charge: $" + towelTotal;
      newPage += "&lt;br /&gt;";
      newPage += "Flushing Charge: $" + flushTotal;
      newPage += "&lt;br /&gt;";
      newPage += "Subtotal: $" + subtotal;
      newPage += "&lt;br /&gt;";
      if(bugDiscount != 0)
      {
      newPage += "Discount: $" + bugDiscount;
      newPage += "&lt;br /&gt;";
      }
      newPage += "Total Due: $" + totalDue;
      newPage += "&lt;br /&gt;";
      newPage += "Come back and visit us again at the Happy Hoppin' Hotel"
  
  var j = window.open('','','width=400,height=500');
  j.document.write(newPage);
  j.document.close();
  
  }
  </code></pre>
  
  <p>This may help as a visual <a href="http://jsbin.com/ifuxiv/1/edit" rel="nofollow">http://jsbin.com/ifuxiv/1/edit</a>
  If you click calculate, enter a value in Guest ID, then click calculate again you'll see that the "Guest ID must be a number" message doesn't go away.</p>
  
  <p>If my question is confusing or any additional information is needed, please ask before rejecting my question. Thanks.</p>