javascript - 未定义的 HTML 元素

Question

我做了一个 Knight's Tour在 javascript 中的游戏。你可以试试here . (特别是为了重现错误)

我在查找读取时遇到了很多麻烦的错误

Uncaught TypeError: Cannot read property 'innerHTML' of undefined

但我不确定为什么它是未定义的。我有一张有 64 个单元格的 table (制作棋盘)。它们都是简单而空洞的

<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。任何帮助将不胜感激。

Answer 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=='♞') ...
    }
}