title: Cannot set property 'innerHTML' of null in AJAX Call
body: <p>I have looked through about 30 different articles about this error on this site and have not found the answer I need. </p>
  
  <p>I am getting the dreaded <code>Cannot set property 'innerHTML' of null</code> message when I click a cell in my <code>div</code> table i created. I have checked the order of the page load to make sure that the JS is below the html tags. 
  I think is may have to do with using a variable name in the <code>getElementById</code> syntax.</p>
  
  <p>Here is my code I am using (sorry for the noobish style of coding):</p>
  
  <pre><code>&lt;HTML&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
  &lt;table border=1&gt;
  &lt;tr&gt;&lt;td colspan="11"&gt;&lt;center&gt;&lt;h2&gt;Away Team&lt;/h2&gt;&lt;/center&gt;&lt;/td&gt;&lt;/tr&gt;
          &lt;?php 
          $ROWMAX=3;
          $COLMAX=3;
          //Rows = j
          for($j=-1;$j&lt;=$ROWMAX-1;$j++){
              echo "&lt;tr&gt;";
              //Columns = i
              for($i=-1;$i&lt;=$COLMAX-1;$i++) { 
                  if($i == -1 &amp;&amp; $j == -1){
                      echo "&lt;th class='header-cols'&gt;&lt;/th&gt;"; }
                  elseif($i == -1 &amp;&amp; $j &gt;= 0){
                      echo "&lt;th class='header-rows'&gt;&lt;h1&gt;$j&lt;/h1&gt;&lt;/th&gt;";
                  }
                  elseif($j&lt;0){
                      echo "&lt;th class='header-cols'&gt;&lt;h1&gt;$i&lt;/h1&gt;&lt;/th&gt;";
                  }
                  else {
                      $sql = "SELECT name FROM picks WHERE col=$i AND row=$j LIMIT 1";
                      $data = $conn-&gt;query($sql);
                      while($rows=$data-&gt;fetch_assoc()){
                          $currName = $rows['name'];
                          $cellStatus = $rows['status'];
                      }
                      echo "&lt;td class='grid-cells'&gt;
                              &lt;div id='cell-$j-$i' class='$cellStatus' onclick='setCoords($j,$i);'&gt;
                                  &lt;div class='grid-num'&gt;" . (($i+1)+($j*$COLMAX)) . "&lt;/div&gt;
                                  &lt;div class='grid-name-$j-$i'&gt;$currName&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;";
                      $currName="";
                  } 
              }
              echo "&lt;/tr&gt;";
          } ?&gt;
  &lt;/table&gt;
  &lt;form method="post" onSubmit="setSquare()"&gt;
          &lt;div&gt;
            &lt;h3&gt;Submit Your Picks:&lt;/h3&gt;
            &lt;label for="name" class="ui-hidden-accessible"&gt;Name:&lt;/label&gt;
            &lt;input type="text" name="name" id="nameid" placeholder="Name"&gt;&lt;br /&gt;
            &lt;label for="email" class="ui-hidden-accessible"&gt;Email:&lt;/label&gt;
            &lt;input type="text" name="email" id="emailid" placeholder="Email"&gt;&lt;br /&gt;
            &lt;input type="submit" data-inline="true" id='submitbtn' class='btndisabled' value="Make Picks" disabled&gt;
            &lt;div id='row-div'&gt;&lt;/div&gt;
            &lt;div id='col-div'&gt;&lt;/div&gt;
          &lt;/div&gt;
  &lt;/form&gt;&lt;SCRIPT&gt;
  
  function setCoords(row_coords, col_coords){
      var txt_name = document.getElementById("nameid").value;
      var txt_email = document.getElementById("emailid").value;
      if (txt_name != "" &amp;&amp; txt_email != ""){ 
          document.getElementById("cell-"+row_coords+"-"+col_coords).className = "picked";
          setSquare(row_coords, col_coords);
          document.getElementById("submitbtn").className = "btnenabled";
      }
      else
      { alert("Please fill in your name and email before making a pick"); }
  }
  
  function setSquare(row,col)
  {
      //get id vales from form
      var name_id = document.getElementById("nameid").value;
      var email_id = document.getElementById("emailid").value;
      var row_id = row;
      var col_id = col;
      var gridname = "grid-name-"+row+"-"+col;
      //run the ajax code here
      if(name_id != ""){
          if(window.XMLHttpRequest){
              xmlhttp = new XMLHttpRequest();
          } else {
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange = function() {
              if(this.readyState == 4 &amp;&amp; this.status == 200) {
                  document.getElementById(gridname).innerHTML = this.responseText;
                  //alert("grid-name-"+row_id+"-"+col_id);
                  //alert(this.responseText);
              }
          };
          xmlhttp.open("POST","save-square.php?name="+name_id+"&amp;email="+email_id+"&amp;row="+row_id+"&amp;col="+col_id,true);
          xmlhttp.send();
      }
  }
  &lt;/SCRIPT&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>