title: How to store a value as a string from a text input using javascript
body: <p>What I'm attempting to do is to save some user input from a html text field into a JS variable and then on a button click place that text into an iframe.</p>
  
  <p>Retrieving the information from the text field using jQuery isn't the issue as I can console log '$('#userinput').val()' which returns the value but then saving it into a variable seems to return an empty string.</p>
  
  <p>This is my code which uses both the jQuery and the vanilla to attempt to store the string:</p>
  
  <pre><code>$(document).ready(function () {
  
      $result = $('#userinput').val();
      var output = document.getElementById('userinput').value;
      var iframe = document.getElementById('iframe');
  
      doc = iframe.contentDocument;
      doc.open();
      doc.write("test");
      doc.close();
  
      $('#btn_run').click(function () {
          console.log($('#userinput').val());
          console.log(output);
          console.log($result);
          doc.open();
          doc.write(output);
          doc.close();
      });
  });
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;input type="text" id="userinput"&gt;
      &lt;iframe id="iframe"&gt;&lt;/iframe&gt;
      &lt;button id="btn_run"&gt;Run&lt;/button&gt;
  </code></pre>
  
  <p>Confused.</p>
  
  <p>Any help is appreciated :)</p>