Cannot set property 'innerHTML' of null in AJAX Call
<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>