CODEWITHSUNDEEP
javascript
Griffin Obeid
Griffin Obeid

Reputation: 87

Changing status of <td> on click with javascript

I am making a conways game of life in javascript and having trouble getting my onclick implementation to work. It is supposed to change the life status of the cell when the td is clicked, but instead I am getting an error at my console that says : TypeError: World.tds is undefined. TLDR: Can't figure out why onclick won't work. World.tds[] is undefined for some reason.

Onclick implementation: 

if (table !== null) {
for (var i = 0; i < 20; i++) {
    for (var j = 0; j < 20; j++)
        World.tds[i][j].onclick = function() {
            if (World.tds[i][j].cells.alive) {
                World.tds[i][j].cells.alive = false;
            } else {
                World.tds[i][j].cells.alive = true;
            }
        };
}
}

Constructor and tds[] filling

var World = function() {
this.h = maxH;
this.w = maxW;
this.tds = [];
};

//generate the world in which the cells move
World.prototype.init = function() {
var row, cell;
for (var r = 0; r < this.h; r++) {
    this.tds[r] = [];
    row = document.createElement('tr');
    for (var c = 0; c < this.w; c++) {
        cell = document.createElement('td');
        this.tds[r][c] = cell;
        row.appendChild(cell);
    }
    table.appendChild(row);
}
};

Upvotes: 1

Views: 81

Answers (1)

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

Problem Statement - When you trigger the click handler, by that time values of i and j have updated to 20 each and World.tds[20][20] is undefined.

Update your code inside for loop to

(function(i,j) {
        World.tds[i][j].onclick = function() {
            if (World.tds[i][j].cells.alive) {
                World.tds[i][j].cells.alive = false;
            } else {
                World.tds[i][j].cells.alive = true;
            }
        };

})(i,j);

Upvotes: 1

Related Questions