title: Uncaught TypeError: Cannot set property 'innerHTML' of null error
body: <p>I got error of <code>Uncaught TypeError: Cannot set property 'innerHTML' of null</code> for below script.
  I added the script tags after the body. But still I get the error.
  I want to show the text boxes in the same page within the div with the ID <code>showTextBoxes</code>.</p>
  
  <p>Below is the HTML and JS.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showArray(){
    var numofArr = document.getElementById("numofArr").value;
    for (let i = 0; i &lt; numofArr; i++) {
      var a = document.writeln('&lt;input type="text" name="Fname"&gt;&lt;br/&gt;&lt;br/&gt;');
      document.getElementById('showTextBoxes').innerHTML = a;
    }
    document.writeln('&lt;input type="submit" name="submit"&gt;');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Number of arrays(array within 0-9)&lt;/p&gt;
  &lt;input type="text" id="numofArr" pattern="[0-9]"&gt;
  &lt;input type="submit" onclick="showArray()" value="Submit"&gt;&lt;br&gt;&lt;br&gt;
  &lt;div id="showTextBoxes"&gt;&lt;/div&gt;
  
      </code></pre>
  </div>
  </div>
  </p>