默默无闻的TypeError -意想不到的行为

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\x{e 0x}死亡细胞:0\x{e76f} gameoflife.js:54活细胞:2个死区细胞:2 2个gameoflife.js:54活函数活细胞:2，2个死区细胞:2,000,000，2,000，2,000,000，2，2,000,000，2,000,000，2,000，2，2，2,000,000，1，2，2，2，2，1，2，2,000,000，1,000,000，2,000,000,000，2,000，1,000，2，1，2，1，2，1，2，1，2，2，1，2，1，2，1，2，1，2，2，1，2，1，2，1，1，2，1，2，1，2，1，2，2：214个平行活细胞:3个getCell: 3个gameoflife.js:54活功能活细胞:5个getCell活细胞:206个getCell活细胞:4个getCell活细胞:6个getCell活细胞:8个getCell活细胞:8个getCell活细胞死细胞:1 69个getCell: 7 gameoflife.js:54活功能活细胞:9个死亡细胞:0个TypeError活细胞:142个gameoflife.js:54活细胞getCell: 8个gameoflife.js:54活细胞活细胞:10个Dead细胞:0\\x，getCell: 9，gameoflife.js:64，TypeError，TypeError:无法设置属性'innerHTML‘of null。

所以，这里发生的是创建了10个活的单元，然后尝试创建一个死的单元，但是它返回了一个错误。当我将日志更改为在代码之前发生时，错误之前的行如下：

游戏生活:62个死函数死单元格:0收活单元格:5个收活单元格:206个\l单元格:未定义的getCell: 5 gameoflife.js:47未定义的TypeError:无法设置属性'innerHTML‘的空值

考虑到，与创建活细胞没有什么区别，我不知道为什么会发生这种情况。但是，还有一件事让人困惑，因为活细胞的几率较低，创建死细胞的功能实际上是有效的，问题是创建活细胞的功能。不仅如此，idleCells数组中的单元格数有一个奇怪的模式，考虑到每次迭代时我只使用splice()函数一次，以删除liveCells数组或deadCells数组中的索引。

首先，创建网格，然后用表格单元格的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和名称标记必须以字母(A)开头，后面可以是任意数量的字母、数字(0-9)、连字符("-")、下划线("_")、冒号(":")和句点(“”)。

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