未捕获的类型错误 - 意外行为

Question

var chanceOfLiveCells = 0.5;
var gridDomReference = null;
var gridDimension = 15;
var timer = null;

function init() {

    gridDomReference = document.getElementById('grid');
    idleCells = new Array();
    liveCells = new Array();
    deadCells = new Array();

    drawGrid();
    createRandomLiveCells();

}

function drawGrid() {

    var counter = 0;
    var nodes = new Array();

    for(var x = 0; x <= gridDimension - 1; x = x + 1) {

        nodes.push('<tr>');

        for(var y = 0; y <= gridDimension - 1; y = y + 1) {

            nodes.push('<td id="' + counter + '">' + counter + '</td>');
            idleCells.push(counter);
            counter = counter + 1;

        }

        nodes.push('</tr>');

    }

    gridDomReference.innerHTML = nodes.join('');

}

function createRandomLiveCells() {

    for(var x = 0; x <= gridDimension - 1; x = x + 1) {

        for(var y = 0; y <= gridDimension - 1; y = y + 1) {

            if(Math.random() < chanceOfLiveCells) {

                liveCells.push(x * gridDimension + y);
                idleCells.splice(getCell('idle', x, y), 1);
                document.getElementById(getCell('live', x, y)).innerHTML = 'L';
                console.log('[Live function] Live cells: ' + liveCells.length + ' | ' + ' Dead cells: ' + deadCells.length
                        + ' | Idle cells: ' + idleCells.length + ' | ' + 'getCell: ' + getCell('live', x, y) 
                        + ' | N: ' + (x * gridDimension + y));

            }

            else {

                deadCells.push(x * gridDimension + y);
                idleCells.splice(getCell('idle', x, y), 1);
                document.getElementById(getCell('dead', x, y)).innerHTML = 'D';
                console.log('[Dead function] Dead cells: ' + deadCells.length + ' | ' + ' Live cells: ' + liveCells.length
                        + ' | Idle cells: ' + idleCells.length + ' | ' + 'getCell: ' + getCell('dead', x, y) 
                        + ' | N: ' + (x * gridDimension + y));

            }

        }

    }

}

function getCell(array, x, y) {

    if(x > gridDimension - 1) {

        x = 0;

    }

    if(y > gridDimension - 1) {

        y = 0;

    }

    if(x < 0) {

        x = gridDimension - 1;

    }

    if(y < 0) {

        y = gridDimension - 1;

    }

    switch(array) {

        case 'idle': 

            return idleCells[x * gridDimension + y]; 

        break;

        case 'live': 

            return liveCells[x * gridDimension + y]; 

        break;

        case 'dead': 

            return deadCells[x * gridDimension + y]; 

        break;

    }

}

我正在重写康威生命游戏的实现，在重写之前我遇到了一些问题。我假设我的代码是正确的，但我对这个问题感到困惑。我对此做了一些研究，很多人都说这是由于 Chrome“做事”的方式造成的。

以下是执行时控制台中的常见输出：

gameoflife.js:54 [直播功能] 直播 细胞： 1 |死亡细胞：0 |闲置的 细胞：225 |获取单元格：0 |人数：0 gameoflife.js:54 [直播功能] 直播 细胞：2 |死亡细胞：0 |闲置的 细胞：224 |获取单元格：1 |数：1 gameoflife.js:54 [直播功能] 直播 细胞：3 |死亡细胞：0 |闲置的 细胞：221 |获取单元格：2 |数：2 gameoflife.js:54 [直播功能] 直播 细胞：4 |死亡细胞：0 |闲置的 细胞：214 |获取单元格：3 |数：3 gameoflife.js:54 [直播功能] 直播 细胞：5 |死亡细胞：0 |闲置的 细胞：206 |获取单元格：4 |数：4 gameoflife.js:54 [直播功能] 直播 细胞： 6 |死亡细胞：0 |闲置的 细胞：197 |获取单元格：5 |数：5 gameoflife.js:54 [直播功能] 直播 细胞：7 |死亡细胞：0 |闲置的 细胞：187 |获取单元格：6 |数：6 gameoflife.js:54 [直播功能] 直播 细胞：8 |死亡细胞：0 |闲置的 细胞：169 |获取单元格：7 |数：7 gameoflife.js:54 [直播功能] 直播 细胞：9 |死亡细胞：0 |闲置的 细胞：142 |获取单元格：8 |数：8 gameoflife.js:54 [直播功能] 直播 细胞：10 |死亡细胞：0 |闲置的 细胞：105 |获取单元格：9 |人数：9 gameoflife.js:64 未捕获类型错误： 无法设置属性“innerHTML” 空

所以，这里发生的是创建了 10 个活细胞，之后尝试创建一个死细胞，但相反，它返回一个错误。当我将日志记录更改为在代码之前发生时，错误之前的行是这样的：

gameoflife:62 [死亡功能] 死亡细胞: 0 |活细胞：5 |空闲单元：206 | getCell：未定义|数：5 gameoflife.js:47 未捕获类型错误：无法设置 null 属性“innerHTML”

考虑到，与创建活细胞没有区别，我不确定为什么会发生这种情况。但是，还有另一件事令人困惑，在活细胞的机会较低的情况下，创建死细胞的功能实际上起作用，然后问题是创建活细胞的功能。不仅如此，考虑到我在每次迭代时只使用一次 splice() 函数来删除 liveCells 数组或 deadCells 数组中的索引，idleCells 数组中的单元格数量存在奇怪的模式。

首先，创建网格，然后用表格单元格的ID填充idleCells。当我调用 createRandomLiveCells() 时，该函数的工作是创建随机细胞，无论是死细胞还是活细胞。因此，我希望 liveCells 数组和 deadCells 数组都构成表单元格的数量，并且idleCells 数组为空，因为没有空闲单元格，因为表单元格要么死了，要么活了。

对于未记录的代码感到抱歉，我确保它有很好的缩进和间隔以提高可读性，但希望您理解我正在尝试做的事情。

感谢您阅读这么长但希望能得到很好解释的问题以及您的帮助。

Answer 1

首先 document.getElementById(str) 需要字符串，而不是您的情况中的数字。

第二，html 中 ID 属性的值应遵循此处概述的规则：
http://www.w3.org/TR/html40 /struct/global.html#h-7.5.2

特别是：

ID 和 NAME 令牌必须以
字母 ([A-Za-z]) 并可能跟随
由任意数量的字母、数字组成
([0-9])、连字符 (“-”)、下划线
（“_”）、冒号（“:”）和句点
（“。”）。

请注意，ID 应从字母开始。但你使用普通数字。