title: JavaScript function only works after page reload
body: <p>I know this has been asked a lot on here, but all the answers work only with jQuery and I need a solution without it.</p>
  <p>So after I do something, my Servlet leads me to a JSP page. My JS function should populate a drop down list when the page is loaded. It only works properly when the page is refreshed tho.</p>
  <p>As I understand this is happening because I want to populate, using <code>innerHTML</code> and the JS function gets called faster then my HTML page.</p>
  <p>I also get this error in my Browser:</p>
  <pre><code>Uncaught TypeError: Cannot read property 'innerHTML' of null
  at XMLHttpRequest.xmlHttpRequest.onreadystatechange
  </code></pre>
  <p>I had a soulution for debugging but I can't leave it in there. What I did was, every time I opened that page I automatically refreshed the whole page. But my browser asked me every time if I wanted to do this. So that is not a solution that's pretty to say the least.</p>
  <p>Is there something I could do to prevent this?</p>
  <p>Edit:</p>
  <pre><code>    document.addEventListener(&quot;DOMContentLoaded&quot;, pupulateDropDown);
  function pupulateDropDown() {
    var servletURL = &quot;./KategorienHolen&quot;
    let xmlHttpRequest = new XMLHttpRequest();
  
    xmlHttpRequest.onreadystatechange = function () {
      if (xmlHttpRequest.readyState === 4 &amp;&amp; xmlHttpRequest.status === 200) {
  
        console.log(xmlHttpRequest.responseText);
  
        let katGetter = JSON.parse(xmlHttpRequest.responseText);
        JSON.stringify(katGetter);
  
          var i;
      for(i = 0; i &lt;= katGetter.length -1; i++){
        
         
        console.log(katGetter[i].id);
        console.log(katGetter[i].kategorie);
        console.log(katGetter[i].oberkategorie);
      
         if (katGetter[i].oberkategorie === &quot;B&quot;) {
  
          document.getElementById(&quot;BKat&quot;).innerHTML += &quot;&lt;a href=&quot; + &quot;DisplayKlamotten&quot; + &quot;?searchfor=&quot; + katGetter[i].kategorie + &quot;&gt;&quot; + katGetter[i].kategorie + &quot;&lt;/a&gt;&lt;/br&gt;&quot;;
        
        } else if (katGetter[i].oberkategorie === &quot;S&quot;) {    
             
          document.getElementById(&quot;SKat&quot;).innerHTML += &quot;&lt;a href=&quot; + &quot;DisplayKlamotten&quot; + &quot;?searchfor=&quot; + katGetter[i].kategorie + &quot;&gt;&quot; + katGetter[i].kategorie + &quot;&lt;/a&gt;&lt;/br&gt;&quot;;
  
        } else if (katGetter[i].oberkategorie ===&quot;A&quot;) {
  
          document.getElementById(&quot;ACat&quot;).innerHTML += &quot;&lt;a href=&quot; + &quot;DisplayKlamotten&quot; + &quot;?searchfor=&quot; + katGetter[i].kategorie + &quot;&gt;&quot; + katGetter[i].kategorie + &quot;&lt;/a&gt;&lt;/br&gt;&quot;;
        }
  
  
        // document.getElementsByClassName(&quot;innerDiv&quot;).innerHTML = &quot;&lt;a href=&quot; + &quot;DisplayKlamotten&quot; + &quot;?=&quot; + katGetter.kategorie + &quot;&gt;&quot; + katGetter.kategorie + &quot;&lt;/a&gt;&quot;;
        // document.getElementById(&quot;test123&quot;).innerHTML = &quot;&lt;a href=&quot; + &quot;DisplayKlamotten&quot; + &quot;?searchfor=&quot; + katGetter.kategorie + &quot;&gt;&quot; + katGetter.kategorie + &quot;&lt;/a&gt;&quot;;
  
      }
  
  
  
      }
    };
    xmlHttpRequest.open(&quot;GET&quot;, servletURL, true);
    xmlHttpRequest.send();
  }
  </code></pre>