Uncaught TypeError - Unexpected behaviour

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;

    }

}

I am in the process of re-writing my implementation of Conway's Game of Life, I have ran into a few issues prior to this re-write. I am assuming my code is correct, but I am baffled by this issue. I have done some research on it, and a lot of people are saying it is due to the way Chrome 'does things'.

Here is a common output in the console from the execution:

gameoflife.js:54 [Live function] Live cells: 1 | Dead cells: 0 | Idle cells: 225 | getCell: 0 | N: 0 gameoflife.js:54 [Live function] Live cells: 2 | Dead cells: 0 | Idle cells: 224 | getCell: 1 | N: 1 gameoflife.js:54 [Live function] Live cells: 3 | Dead cells: 0 | Idle cells: 221 | getCell: 2 | N: 2 gameoflife.js:54 [Live function] Live cells: 4 | Dead cells: 0 | Idle cells: 214 | getCell: 3 | N: 3 gameoflife.js:54 [Live function] Live cells: 5 | Dead cells: 0 | Idle cells: 206 | getCell: 4 | N: 4 gameoflife.js:54 [Live function] Live cells: 6 | Dead cells: 0 | Idle cells: 197 | getCell: 5 | N: 5 gameoflife.js:54 [Live function] Live cells: 7 | Dead cells: 0 | Idle cells: 187 | getCell: 6 | N: 6 gameoflife.js:54 [Live function] Live cells: 8 | Dead cells: 0 | Idle cells: 169 | getCell: 7 | N: 7 gameoflife.js:54 [Live function] Live cells: 9 | Dead cells: 0 | Idle cells: 142 | getCell: 8 | N: 8 gameoflife.js:54 [Live function] Live cells: 10 | Dead cells: 0 | Idle cells: 105 | getCell: 9 | N: 9 gameoflife.js:64 Uncaught TypeError: Cannot set property 'innerHTML' of null

So, what happened here is 10 live cells were created, after that a dead cell was attempted to be created, but instead, it returns an error. When I changed the logging to happen before the code, line before the error was this:

gameoflife:62 [Dead function] Dead cells: 0 | Live cells: 5 | Idle cells: 206 | getCell: undefined | N: 5 gameoflife.js:47 Uncaught TypeError: Cannot set property 'innerHTML' of null

Considering, there is no difference from creating live cells I am not sure why this is happening. But, here is another thing that is confusing, with a lower chance of live cells, the function that creates dead cells actually works, and the problem then is the function that creates live cells. Not only that, there is a weird pattern in the number of cells in the idleCells array, considering I am only using the splice() function once at each iteration to remove an index that is either in the liveCells array or the deadCells array.

At first, the grid is created, and then idleCells is populated with IDs of table cells. When I make a call to createRandomLiveCells(), the job of that function is to create random cells either dead or alive. So, I expect both the liveCells array and the deadCells array to make up the number of table cells and that the idleCells array is empty, since there are no idle cells because the table cells are either dead or alive.

Sorry about the undocumented code, I made sure it was nicely indented and spaced out for readability, but hopefully you understand what I am trying to do.

Thanks for reading this long but hopefully well-explained problem, and your help.

---

First of all document.getElementById(str) expects string, not a number as in your case.

And the second, value of ID attribute in html shall follow rules outlined here: http://www.w3.org/TR/html40/struct/global.html#h-7.5.2

In particular:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Note that ID shall start from letter. But you use plain numbers.