title: Cannot get value of input field JS
body: <p>I am very new to JS and HTML, so my apologies.
  I have run into trouble trying to validate input into a form field with the pattern='' attribute. Although it catches invalid input and gives the appropriate error message, subsequent modifications of the input do not change the error message. For example,</p>
  
  <p><code>pattern="[a-zA-Z]"</code> will produce the appropriate message if the user enters "testing2" into the field. But if the user edits the entry to "testing" I still get a validation error. </p>
  
  <p>In trying to figure this out, I tried to log the field input to the console.
  So, in the HTML:</p>
  
  <p><code>&lt;input class="dest_one_key" name="dest_one_key" type="text" id="dest_one_key" required="" placeholder="Work"&gt;</code></p>
  
  <p>and then:</p>
  
  <p><code>&lt;script&gt;
    var v = document.getElementById('dest_one_key').value;
    document.getElementById('dest_one_key').addEventListener('change', function() {
      console.log(</code>Value: ${v}<code>);
  });
  &lt;/script&gt;</code></p>
  
  <p>...which yeilds</p>
  
  <p>"Value: "</p>
  
  <p>in the console. 
  So the form does not seem to be capturing the users input. </p>
  
  <p>What I'm doing wrong with respect to:
  1) Not being able to properly register that the user has a valid input after an invalid input
  2) logging the value of the field to the console?</p>