title: remove label message on keydown - javascript
body: <p>quick question, my prompt is working okay, when someone leave the phone input field blank my label message shows, but how do I remove the message, when they go back to the input field on click down?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function validatePhone(){
     var phone  = document.getElementById("phone1").value;
     if(phone.length === 0) {
      console.log("phone number is required.");
      producePrompt("Phone number is required.", "messagePrompt", "red");
      return false;
     } 
    }
  
  
    function producePrompt(message, promptLocation, color) {
     document.getElementById(promptLocation).innerHTML = message;
     document.getElementById(promptLocation).style.color = color;
    }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> form {
    width: 30em;
    height: 10em;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #2c3e50;
   }
  
   form input {
    text-align: left;
    padding-left: 5px;
    margin: 0 0 10px 15px;
    position: relative;
    
    }
  
   form label {
    text-align: center;
   }
  
   #messagePrompt {
    color: red;
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;p&gt;Please enter your phone number below:&lt;/p&gt;
    &lt;input name="phone1" id="phone1" placeholder="(000)000-0000" /&gt;
    &lt;label for="" id="messagePrompt"&gt;&lt;/label&gt;
    &lt;br&gt;
      &lt;input type="button"  value="send message" onclick="validatePhone()"  /&gt;
   &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>