title: getElementById() returns null although the element exists
body: <p>I am new to web (JSP, java-script etc). I am creating check-boxes dynamically and then applying java-script on them. The problem is that <strong>document.getElementById(..) always return null</strong>. I know this question has been <a href="https://www.google.de/search?q=document.getElementById%20returned%20null%20even%20though%20control%20exists&amp;oq=document.getElementById%20returned%20null%20even%20though%20control%20exists&amp;aqs=chrome..69i57.10976j0j7&amp;sourceid=chrome&amp;espv=210&amp;es_sm=122&amp;ie=UTF-8#q=document%20getelementbyid%20returns%20null%20stackoverflow" rel="nofollow noreferrer">asked</a> many times, I tried those solutions but somehow they didn't worked for me, may be i am trying them wrong. Here's my code:</p>
  
  <pre><code>//window.onload = function handleUnusedDieFunctions(checkboxid) {
  function handleUnusedDieFunctions(checkboxid) {
  
      console.log("checkbox id: " + checkboxid);
      var id = checkboxid;
      var chkd = document.getElementById(checkboxid.toString());
      console.log(chkd);
      alert("Just a formality");
      if(chkd.checked) {
         alert("checked");    
      }
      else {
          alert("unchecked");
      }
  }
  
  &lt;!-- Some portion of jsp code --&gt;
  
  &lt;div .....
  out.println("&lt;table&gt;");
  if((die.getFunctionList() != null) &amp;&amp; (!die.getFunctionList().isEmpty())){
      functionListForDie = die.getFunctionList();
      ListIterator li11 = functionListForDie.listIterator();
      Function f1;
  while (li11.hasNext()) {
  f1 = (Function)li11.next();
  System.out.println("IC: " + ic.getID() + " Die: " + die.getID() + ", Func: " +
                         f1.getID() + "\n");
  out.println("&lt;tr&gt;");
      out.println("&lt;td style='width:30px;'&gt;");
  if(unusedIcDieList.size() != 0)
  {
      Boolean sameDie = false;
      Boolean sameFunc = false;
      for(IcDie icdie: unusedIcDieList)
      {
      if((icdie.getDieID() == die.getID()))
      {
          sameDie = true;
          System.out.println("icdie.getDieID() == " + icdie.getDieID() + 
                                     " , die.getID() == " + die.getID());
          ArrayList&lt;Integer&gt; unusedFunctionsList = icdie.getUnusedFunctions();
          for(Integer func: unusedFunctionsList)
          {
          System.out.println("Checking func = " + func + ", f1.getID() = " + f1.getID() );
          if(func.intValue() == f1.getID().intValue()) {
              System.out.println("func == " + func + " , f1.getID() == " + f1.getID());                                                                                                       
              sameFunc = true;
           }
      }
  
  }
  }
  System.out.println("Same Die: " + sameDie.toString() + " , Same Func: " + sameFunc.toString() + "\n");
  if(sameDie &amp;&amp; sameFunc) {
      String id="test_" + String.valueOf(count);
      System.out.println("Should print unchecked checkbox for id: " + id);
  %&gt;
  &lt;input type="checkbox" name="unusedfunction" class="standard_checkbox" 
       style="margin: 0px 12px 0px 0px;"  id="'&lt;%=id%&gt;'"           click="handleUnusedDieFunctions('&lt;%=id%&gt;')" &gt;&lt;br&gt;
     &lt;%
  }
  else {
      String id="test_" + String.valueOf(count);
      System.out.println("Should print checked checkbox for id: " + id);
  %&gt;
  &lt;input type="checkbox" name="unusedfunction" class="standard_checkbox" style="margin: 0px 12px 0px 0px;" 
      id="'&lt;%=id%&gt;'" onclick="handleUnusedDieFunctions('&lt;%=id%&gt;')" checked="checked" &gt;&lt;br&gt;
  &lt;%
  
  }
   }
  else
  {
  %&gt;
  &lt;input type="checkbox" name="unusedfunction" class="standard_checkbox" style="margin: 0px 12px 0px 0px;" 
      id="'&lt;%=id%&gt;'" onclick="handleUnusedDieFunctions('&lt;%=id%&gt;')" checked="checked" &gt;&lt;br&gt;
  &lt;%
  }
  count++;
  </code></pre>
  
  <p>What happens is that I can see the textbox id in the log and the first alert but document.getElementById(..) returns null. 
  I tried putting the function after <a href="https://stackoverflow.com/questions/4179556/why-is-my-element-null">window.load</a> but when i do that I didn't even get the 1st alert and get these errors on the console.</p>
  
  <pre><code>TypeError: checkboxid is undefined
  var chkd = document.getElementById(checkboxid.toString());
  
  ReferenceError: handleUnusedDieFunctions is not defined
  handleUnusedDieFunctions('test_1')
  </code></pre>
  
  <p>I know its not a good idea to mix java code in jsp pages, but this code is not written by me, and i just have to add to add some features in it, but yes at some point this must be fixed.</p>
  
  <p>Can you please tell what I am doing wrong ?</p>
  
  <p>Thanks.</p>