Question

我在本网站上查看了大约30篇关于此错误的不同文章，但未找到我需要的答案。

当我点击我创建的Cannot set property 'innerHTML' of null表格中的单元格时，我收到了可怕的div消息。我检查了页面加载的顺序，以确保JS低于html标记。我认为可能与在getElementById语法中使用变量名称有关。

这是我正在使用的代码（对于noobish编码风格感到抱歉）：

<HTML>
</HEAD>
<BODY>
<table border=1>
<tr><td colspan="11"><center><h2>Away Team</h2></center></td></tr>
        <?php 
        $ROWMAX=3;
        $COLMAX=3;
        //Rows = j
        for($j=-1;$j<=$ROWMAX-1;$j++){
            echo "<tr>";
            //Columns = i
            for($i=-1;$i<=$COLMAX-1;$i++) { 
                if($i == -1 && $j == -1){
                    echo "<th class='header-cols'></th>"; }
                elseif($i == -1 && $j >= 0){
                    echo "<th class='header-rows'><h1>$j</h1></th>";
                }
                elseif($j<0){
                    echo "<th class='header-cols'><h1>$i</h1></th>";
                }
                else {
                    $sql = "SELECT name FROM picks WHERE col=$i AND row=$j LIMIT 1";
                    $data = $conn->query($sql);
                    while($rows=$data->fetch_assoc()){
                        $currName = $rows['name'];
                        $cellStatus = $rows['status'];
                    }
                    echo "<td class='grid-cells'>
                            <div id='cell-$j-$i' class='$cellStatus' onclick='setCoords($j,$i);'>
                                <div class='grid-num'>" . (($i+1)+($j*$COLMAX)) . "</div>
                                <div class='grid-name-$j-$i'>$currName</div>
                            </div>
                        </td>";
                    $currName="";
                } 
            }
            echo "</tr>";
        } ?>
</table>
<form method="post" onSubmit="setSquare()">
        <div>
          <h3>Submit Your Picks:</h3>
          <label for="name" class="ui-hidden-accessible">Name:</label>
          <input type="text" name="name" id="nameid" placeholder="Name"><br />
          <label for="email" class="ui-hidden-accessible">Email:</label>
          <input type="text" name="email" id="emailid" placeholder="Email"><br />
          <input type="submit" data-inline="true" id='submitbtn' class='btndisabled' value="Make Picks" disabled>
          <div id='row-div'></div>
          <div id='col-div'></div>
        </div>
</form><SCRIPT>

function setCoords(row_coords, col_coords){
    var txt_name = document.getElementById("nameid").value;
    var txt_email = document.getElementById("emailid").value;
    if (txt_name != "" && 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 && 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+"&email="+email_id+"&row="+row_id+"&col="+col_id,true);
        xmlhttp.send();
    }
}
</SCRIPT>
</BODY>
</HTML>

Answer 1

发现差异：

<div id='cell-$j-$i' class='$cellStatus' onclick='setCoords($j,$i);'>
     ^^
     <div class='grid-name-$j-$i'>$currName</div>';
          ^^^^^

var gridname = "grid-name-"+row+"-"+col;
document.getElementById(gridname).innerHTML = this.responseText;
                     ^^

class 不 id，getElementById()找不到 - 请注意 ID 部分功能名称。

Answer 2

更改下面的Html代码

<div class='grid-name-$j-$i'>$currName</div>

到

<div id='grid-name-$j-$i'>$currName</div>

因为您在代码中通过ID引用它们

document.getElementById(gridname).innerHTML = this.responseText;

无法在AJAX调用中设置null的属性'innerHTML'

2 个答案: