未定义的 HTML 元素答案

【问题标题】：Undefined HTML Element未定义的 HTML 元素
【发布时间】：2013-09-06 13:53:55
【问题描述】：

我用 javascript 制作了一个Knight's Tour 游戏。你可以试试here。 （特别是为了重现错误）

我很难找到读取的错误

未捕获的类型错误：无法读取未定义的属性“innerHTML”

但我不确定为什么它是未定义的。我有一张有 64 个单元格的表格（制作棋盘）。它们都被建造得平淡无奇

<table border=1 style="border: 1px solid black; table-layout: fixed;">
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr><tr>
    ...

这是页面上唯一的表格。我使用 javascript 来检索所有 td 元素，并通过它们进行迭代，为游戏添加 id、类、背景颜色和 onclick eventListeners。

var tds;
window.onload = function() {
    tds = document.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++) {
        if (typeof window.addEventListener === 'function') {
            (function (td) {
                ...
                td.addEventListener('click', function() {
                    ...

似乎有几个不同的单元格反复出现此错误。有时我可以让单个单元格产生错误，有时我不能。一个可重复的示例是首先移动到最底行，倒数第二个单元格，然后尝试移动到单元格上两个向上，一个从它的侧面向右移动。

我经常在 onclick 中阅读 innerHTML 属性。我指的是 td 元素的全局 tds 数组。这里基本上是我自己访问它们的所有形式。

if (tds[cell].innerHTML === "") {
if (tds[n].innerHTML === "♞") {
tds[cell].innerHTML = "♞";
tds[target].innerHTML = "♘";
td.innerHTML = "♞";

我真的以为我在reading about 时已经弄清楚了使用 var 声明变量和不使用它时的区别，但我无法弄清楚导致此错误的单个 var。任何帮助将不胜感激。

【问题讨论】：

你的错误 - 它是关于读取 innerHTML 属性 - 你实际上是在哪里做的？向我们展示那个代码。
@Benjamin 已添加。给出了我遇到的所有我称之为的方式，其中一些在代码中出现了很多次。
问题是 n 在那个时候等于 64。tds 的总长度是 64（或 0 到 63）并且它正在生成一个错误，因为 n 代表的元素超出数组范围。
@Andy 那不会产生数组外索引错误吗？发生这种情况的单元格位于表格中的多个位置。
它说tds[n] 是undefined，而不是innerHTML。如果您不相信 n 是 64 岁，请自行测试。

标签： javascript html css chess

【解决方案1】：

边界测试：

 if (x > 0 && y < 6) { //bottom right

不对，x条件应该是x < 7；这是您要避免的右侧列，而不是左侧。

为了避免所有重复（以及随后出现类似这样的微不足道的复制粘贴编辑错误的可能性），我建议在 x/y 坐标项中进行位置计算，然后从那里计算单元索引而不是工作在单元格索引中并分别检查每个边界。实际上，表格具有rows/cells 属性，因此您也不必进行单元格索引计算。例如：

var knight_moves = [[-1, -2], [1, -2], [-2, -1], [2, -1], [-2, 1], [2, 1], [-1, 2], [1, 2]];

for (var i= knight_moves.length; i-->0;) {
    var other_x = x + knight_moves[i][0];
    var other_y = y + knight_moves[i][1];
    if (other_x>=0 && other_x<8 && other_y>=0 && other_y<8) {
        var cell = table.rows[other_y].cells[other_x];
        if (cell.innerHTML=='♞') ...
    }
}

【讨论】：

我之前就开始这样做了，当我在意识到我可以做一个坐标系之前遇到问题时，我又回到了疯狂的重复。感谢您查看代码并找到改进方法！

【解决方案2】：

问题在于 n 在该点等于 64。tds 数组的总长度为 64（或 0 到 63）并且它正在生成错误，因为 n 表示的元素在数组的范围。

【讨论】：