javascript, HTML Form: Click button to insert NULL
<p>Here is code I am using, which can run in the <strong>textarea</strong> field, but cannot run in the <strong>input</strong> field. How can I modify the code in order can run in the <strong>input</strong> field??</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;head&gt;
    &lt;script type="text/javascript"&gt;
      function insertText(elemID, text)
      {
        var elem = document.getElementById(elemID);
        elem.innerHTML = text;
      }
    &lt;/script&gt;
  &lt;/head&gt;

    &lt;form&gt;
 &lt;textarea id="txt1" name="passport_no" rows="1" style="width: 100px" required="required"&gt;&lt;/textarea&gt;
    &lt;input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');"&gt;
 
 &lt;br&gt;&lt;br&gt;
 &lt;textarea id="txt2" name="hkid_no" rows="1" style="width: 100px" required="required"&gt;&lt;/textarea&gt;  
    &lt;input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"&gt; 

    &lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>I tried to modify into <strong>input</strong> field as below, but it cannot run. </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;form&gt;
 &lt;input id="txt1" name="passport_no" style="width: 100px" required="required"&gt;
    &lt;input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');"&gt;
 
 &lt;br&gt;&lt;br&gt;
 &lt;input id="txt2" name="hkid_no" style="width: 100px" required="required"&gt;
 &lt;input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"&gt; 
    &lt;/form&gt;</code></pre>
</div>
</div>
</p>