title: JQuery .val not working
body: <p>I've checked a number of related questions/answers on SO but can't find a solution. I have the following code:</p>
  
  <p>
  </p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Admin&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="shortcut icon" href="#"&gt;
  
      &lt;script src="jquery-3.3.1.js"&gt; &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div&gt;Test area&lt;/div&gt;
      &lt;br/&gt;
  
      &lt;script&gt;
          document.write('&lt;button onclick="updateFunc()"&gt;TEST&lt;/button&gt;');
          document.write('&lt;input type="text" id="mytext"&gt;');
  
          function updateFunc()
          {
              document.write($('mytext').val());
          }
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>The output When I click the TEST button is:</p>
  
  <pre><code>    undefined
  </code></pre>
  
  <p>Don't know what I'm doing wrong here. I've tried moving things around, e.g. order of javascript, taken the HTML out into the HTML body rather than "printing" it in the JS, but still I keep getting undefined. I inspected the element and I get:</p>
  
  <pre><code>    &lt;input type="text" id="mytext"&gt;
  </code></pre>
  
  <p>in the browser.</p>