TypeError document.getElementByID() ... 为空？答案

【问题标题】：TypeError document.getElementByID() ... is null?TypeError document.getElementByID() ... 为空？
【发布时间】：2012-11-26 04:53:47
【问题描述】：

谁能告诉我为什么会出现这个错误？

"TypeError: document.getElementById(...) is null @ line:25"

我正在使用 JavaScript，这就是我目前在 <script> 标签中的内容...

var initBoard = new Array(new Array(0, 0, 0, 1),
                      new Array(0, 0, 0, 0),
                      new Array(3, 0, 0, 0),
                      new Array(0, 0, 2, 0)
);

function insertData(){
for(var i = 0; i < 4; i++){
    for(var j = 0; j <4; j++){
        document.getElementById(i.j).innerHTML = initBoard[i][j];

    }
}
}

在我的 HTML <body> 的下面我有这个....

<table border="2" >
<tr align="center">
<td><div id="00">0</div></td>
<td><div id="01">0</div></td>
<td><div id="02">0</div></td>
<td><div id="03">0</div></td>
</tr>

<tr align="center">
<td><div id="10">0</div></td>
<td><div id="11">0</div></td>
<td><div id="12">0</div></td>
<td><div id="13">0</div></td>
</tr>

<tr align="center">
<td><div id="20">0</div></td>
<td><div id="21">0</div></td>
<td><div id="22">0</div></td>
<td><div id="23">0</div></td>
</tr>

<tr align="center">
<td><div id="30">0</div></td>
<td><div id="31">0</div></td>
<td><div id="32">0</div></td>
<td><div id="33">0</div></td>
</tr>

当我尝试运行它时，我从上面得到了那个错误。

我还尝试将“ID”硬编码为'00' 或'01'，但它仍然给我同样的错误信息。

有谁知道我做错了什么？我到处看了看，到处都在说基本相同的事情，应该很容易，但我无法超越。

编辑：第 25 行是 document.getElementById(i.j).innerHTML = initBoard[i][j];

【问题讨论】：

除了下面的答案之外，请确保您在 onload 处理程序中运行所有这些。如果运行得太早，则 ID 尚未定义。
@DrC：说得很好。如果代码在元素渲染之前运行，则不会找到任何内容。
@DrC 我认为这可能正在发生，因为即使使用下面的答案并且我在 ID 中硬编码而不是使用 i.j，我仍然会得到同样的结果。我可以这样做吗？
我会写一个简短的答案。

标签： javascript html getelementbyid

【解决方案1】：

您想将数字转换为字符串并将它们连接起来。

document.getElementById(i + "" + j).innerHTML = ...

您有i.j，它将获取i 引用的数字，并要求它提供其j 属性，该属性将返回undefined。

【讨论】：

【解决方案2】：

是的 - 我曾经遇到过同样的问题。问题是：

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 (" _")、冒号 (":") 和句点 (".")。

因此，您将不得不更换分配 ID 的方式

另外 - 你的 i.j 方法不正确

【讨论】：

虽然 HTML 4 确实不允许 ID 以数字开头，但 HTML5 确实允许。即使在不支持 HTML5 的旧浏览器中，DOM 选择仍然可以工作。
不知道 html 5 的事情 - 谢谢。我确实有一次使用 id 的方法有问题，但也许我正在做一些更复杂的事情，可能涉及 jquery。

【解决方案3】：

确保代码在文档完全加载后执行。类似的东西

window.addEventListener("load", function() {
     <your current code>
},0);

正如其他海报所说，使用“cell”+i+“_”+j 之类的东西也是一个好主意。我会加上下划线，这样“111”就不会模棱两可了。

【讨论】：