js运行的行，它不应该在for中的if中运行

Question

我正在尝试获取具有某个类但返回错误的相邻(w/corners(的数量。

Html是带有空tbody的表。

Css:

table{
border-collapse:collapse;
background-color:black;
}
td{
width:47.5px;
height47.5px;
padding:0px;
border:2.5px solid gray;
}
td.live{
background-color:white;
}

js:

const size={
x:5,
y:5
};
var matrix=[];
for(var i=[0, 0], rows=[]; i[0]<size.y; i[0]++){
rows.push(document.createElement("tr"));
document.querySelector("tbody").appendChild(rows[i[0]]);
matrix.push([]);
for(i[1]=0; i[1]<size.x; i[1]++){
matrix[i[0]][i[1]]=document.createElement("td");
matrix[i[0]][i[1]].setAttribute("x", i[1]);
matrix[i[0]][i[1]].setAttribute("y", i[0])
rows[i[0]].appendChild(matrix[i[0]][i[1]]);
}
}
for(var i=[0,0]; i[0]<matrix.length; i[0]++){
for(i[1]=0; i[1]<matrix[0].length; i[1]++){
matrix[i[0]][i[1]].onclick=function(){
this.classList.toggle("live");
}
}
}
var interval=setInterval(loop(), 500);
function loop(){
for(var i=[0,0]; i[0]<matrix.length; i[0]++){
for(i[1]=0; i[1]<matrix[0].length; i[1]++){
const x=Number(matrix[i[0]][i[1]].getAttribute("x"));
const y=Number(matrix[i[0]][i[1]].getAttribute("y"));
var liveNeighbors=0;
if(x!=size.x){
if(document.querySelector('td[x="'+(x+1)+'"]').classList.contains("live")){
liveNeighbors++;
}
}
if(y!=size.y){
if(document.querySelector('td[y="'+(y+1)+'"]').classList.contains("live")){
liveNeighbors++;
}
}
if(x!=0){
if(document.querySelector('td[x="'+(x-1)+'"]').classList.contains("live")){
liveNeighbors++;
}
}
if(y!=0){
if(document.querySelector('td[y="'+(y-1)+'"]').classList.contains("live")){
liveNeighbors++;
}
}
if(!(matrix[i[0]][i[1]].classList.contains("live"))&&liveNeighbors==3){
matrix[i[0]][i[1]].classList.add("live");
}
if(matrix[i[0]][i[1]].classList.contains("live")&&(liveNeighbors!=2||liveNeighbors!=3)){
matrix[i[0]][i[1]].classList.remove("live");
}
}
}
}

这就是错误：

*未捕获的TypeError:无法读取null的属性"classList"at循环*

我认为它在if循环中运行代码，而不应该运行。

提前感谢！(：

Answer 1

当表本身是矩阵时，我认为您的矩阵数组会使这一点变得过于复杂。

表元素有一个rows属性，该属性返回其可以索引的行的集合。表还有方法insertRow((

表行有一个cells属性，该属性也可以被索引，并且它有一个方法insertCell((

下面的内容有点粗糙，对于实时计数来说不是没有错误的，但应该会让你知道如何在不需要使用querySelector()的情况下完成这项工作，以及如何迭代所有的行和单元格

const size = { x: 5, y:5};
const table = document.querySelector('table');
buildRows()
setInterval(loop, 2000);

function getLiveCount(cell){
const {x, y} = cell.dataset;
const rows = table.rows;
const left = rows[y].cells[x-1],
right = rows[y].cells[x+1],
above = rows[y-1] && rows[y-1].cells[x],
below = rows[y+1] && rows[y+1].cells[x];
return [left, right, above, below].filter(cell=>cell)
.reduce((a, currCell)=> a + currCell.matches('.live'),0)      
}
function loop(){ 
[...table.rows].forEach((row, i)=> {    
[...row.cells].forEach(cell=> cell.textContent = getLiveCount(cell))      
});
}
function buildRow(y) {
const row = table.insertRow();
for(let i=0; i <size.x; i++){
const cell = row.insertCell();
Object.assign(cell.dataset, {x:i, y});
cell.addEventListener('click',cellClick);      
}  
}
function buildRows(){
for(let i =0; i< size.y; i++){
buildRow(i)
}
}

function cellClick(event){
this.classList.toggle('live')
console.log('x:', this.dataset.x, ' y:', this.dataset.y)
}

td {
width: 20px;
height: 20px;
border: 1px solid #ccc
}
td.live {
background: yellow
}

<table>
<tbody></tbody>
</table>