使用javascript更改点击状态

时间:2016-03-24 15:09:02

标签: javascript

我正在使用javascript制作一个conways游戏,并且无法让我的onclick实现工作。它应该在单击td时更改单元的生命状态,但是我在控制台上遇到错误:TypeError:World.tds未定义。 TLDR:无法弄清楚为什么onclick不会工作。由于某种原因,World.tds []未定义。

Onclick实施:

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;
            }
        };
}
}

构造函数和tds []填充

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);
}
};

1 个答案:

答案 0 :(得分:1)

问题陈述 - 当您触发点击处理程序时,到那时i和j的值已更新为20,而World.tds [20] [20]未定义。

for loop内的代码更新为

(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);