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;

    }

}

我正在重新编写Conway的生命游戏的实现过程，在重写之前我遇到了一些问题。我假设我的代码是正确的，但我对此问题感到困惑。我对它进行了一些研究，很多人都说这是由于Chrome'做事的方式'。

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

gameoflife.js：54 [现场演出]直播细胞：1 |死细胞：0 |闲细胞：225 | getCell：0 | N：0 gameoflife.js：54 [现场演出]直播细胞：2 |死细胞：0 |闲细胞：224 | getCell：1 | N：1 gameoflife.js：54 [现场演出]直播细胞：3 |死细胞：0 |闲细胞：221 | getCell：2 | N：2 gameoflife.js：54 [现场演出]直播细胞：4 |死细胞：0 |闲细胞：214 | getCell：3 | N：3 gameoflife.js：54 [现场演出]直播细胞：5 |死细胞：0 |闲细胞：206 | getCell：4 | N：4 gameoflife.js：54 [现场演出]直播细胞：6 |死细胞：0 |闲细胞：197 | getCell：5 | N：5 gameoflife.js：54 [现场演出]直播细胞：7 |死细胞：0 |闲细胞：187 | getCell：6 | N：6 gameoflife.js：54 [现场演出]直播细胞：8 |死细胞：0 |闲细胞：169 | getCell：7 | N：7 gameoflife.js：54 [现场演出]直播细胞：9 |死细胞：0 |闲细胞：142 | getCell：8 | N：8 gameoflife.js：54 [现场演出]直播细胞：10 |死细胞：0 |闲细胞：105 | getCell：9 | N：9 gameoflife.js：64 Uncaught TypeError：无法设置属性'innerHTML' 空

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

gameoflife：62 [死亡功能]死细胞：0 |活细胞：5 |空闲细胞：206 | getCell：undefined | N：5 gameoflife.js：47 Uncaught TypeError：无法设置属性'innerHTML'为null

考虑到，创建活细胞没有区别我不知道为什么会这样。但是，这是令人困惑的另一件事，即活细胞的可能性较低，创造死细胞的功能实际上起作用，然后问题是创建活细胞的功能。不仅如此，idleCells数组中的单元格数有一个奇怪的模式，考虑到我在每次迭代时只使用一次splice（）函数来删除liveCells数组或deadCells数组中的索引。 / p>

首先，创建网格，然后使用表格单元格的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开头信（[A-Za-z]），可以遵循任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句号（ “”）。

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

未捕获的TypeError - 意外行为

1 个答案: