title: getElementById() null error
body: <p>For those who wants the soluce before the question : </p>
  
  <p>1 ) Don't read an element with getElementById() before it's really created : see windows.onload.</p>
  
  <p>2 ) If you are using XMLHTTPRequest and AJAX stuff, call you're getElementById() , or unlock this function, in the callback ,(xhr_object.readyState == 4 part of your request).</p>
  
  <p>In my case, i call my page without using the desired callback (noobish Ctrl-C Ctrl-V style).</p>
  
  <p>Here was the question :</p>
  
  <p>I'm facing a strange case in a HTML/Javascript code.
  The aim of this code is to get the value of an HTML input (type text) via a JS function.</p>
  
  <p>The context is that a main HTML page loads my all my JS functions, and loads on demand HTML contents in sub divs via HTTPRequest.</p>
  
  <p>The selected code is called after the divs has been loaded.</p>
  
  <p>Here's the PHP generated Input field that i have to read:</p>
  
  <pre><code>    &lt;input id="listejf" type="text" value="6|7|"&gt;
  </code></pre>
  
  <p>Here's my JavaScript call :</p>
  
  <pre><code>    listejf=document.getElementById('listejf').value;
      alert(listejf);
  </code></pre>
  
  <p>This code doesn't work. Firebug sends me:</p>
  
  <blockquote>
    <p>TypeError: document.getElementById("listejf") is null</p>
  </blockquote>
  
  <p>The strange thing is that I can make it work if I call the <code>getElementById</code> through an <code>alert</code> like this:</p>
  
  <pre><code>    alert(document.getElementById("listejf"));
      listejf=document.getElementById('listejf').value;
      alert(listejf);
  </code></pre>
  
  <p>The first <code>alert</code> displays <code>null</code>, but the second one "6|7|", as expected.</p>
  
  <p>Now, 2 questions:</p>
  
  <ul>
  <li>Why does alert make it work ?</li>
  <li>How can I make it work without throwing alerts everywhere?</li>
  </ul>
  
  <p>Re-edit, the code was gone :</p>
  
  <p>That's is the main HTML page : main.html</p>
  
  <pre><code>&lt;head&gt;
      &lt;script type="application/javascript" src="./preload.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;a href="#" onCLick="CallPagen()"&gt;Link&lt;/a&gt;
      &lt;div id="targetid"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>preload.js looks like that :</p>
  
  <pre><code>function CallPagen() {
      envoieRequete('./PageN.php', 'targetid');
  }
  
  function mytestfunction() {
      listejf = document.getElementById('listejf').value;
      alert(listejf);
  }
  
  function envoieRequete(url, id) {
      var xhr_object = null;
      if (window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
      else if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
      xhr_object.open("GET", url, true);
      xhr_object.onreadystatechange = function () {
          if (xhr_object.readyState == 4) {
              if (!document.getElementById(id)) {
                  alert("id pas trouvé " + id);
              }
              document.getElementById(id).innerHTML = xhr_object.responseText;
              mytestfunction();
          }
      };
      xhr_object.send(null);
  }
  </code></pre>
  
  <p>PageN.php just echoes the inputtext field with the value filled.</p>