title: Store variable from input box and display value in p tag
body: <p>I am trying to take a value from a text input box then then display it on the screen. </p>
  
  <p>I have this block of JS acting on the following HTML</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>$(".button").click(function(){
   var userName = $('#userNameInput').val();
   $('.userDisplay').html(userName);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="userNameInput"&gt;
  &lt;input value="submit" class="button closepopup" type="button"&gt;
  &lt;p id="userDisplay"&gt;default&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Currently the program doesn't print the value, but it does store it, as I can print the value to console.</p>