DOM有关问题求助。

[Z.Chen]

题目：制作一个小游戏，从Api取数，导进HTML里，如图：


点击任意灰色格子，可以使之变成白色或蓝色。改变所有灰色格子，但是不能有三个蓝色或白色格子在一行或一列，即为成功。(本题没那么复杂不用写逻辑，正确答案是唯一的，json已经给出了)

我写的代码中第8行所取的json数据如下：

{
rows: [
[
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: false,
currentState: 1,
correctState: 1
},
{
canToggle: false,
currentState: 1,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 2
}
],
[
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: false,
currentState: 1,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 1
}
],
[
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 2
}
],
[
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: false,
currentState: 2,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: false,
currentState: 2,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 1
}
],
[
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: false,
currentState: 1,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 1
}
],
[
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: false,
currentState: 2,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 2
},
{
canToggle: true,
currentState: 0,
correctState: 1
},
{
canToggle: true,
currentState: 0,
correctState: 2
}
]
]
}

我写的代码如下：

(function() 
{
    window.onload = function()
    {
        var theGameDiv = document.getElementById('theGame');
        var newHtml = "";
       
        fetch('https://www.****.com/3inarow/sample.json')
        .then(function(response)
        {
            return response.json();
        })
        .then(function(json)
        {          
            for(var i=0; i<json.rows.length; i++)
            {
                newHtml += "<tr>";
                for(var j=0; j<json.rows[i].length; j++)
                { 
                    if(json.rows[i][j].currentState === 0)
                    {
                        newHtml += `<td class="eachTD" id="rnc${i}${j}" style="background-color:#95918C"></td>`
                    }
                    else if(json.rows[i][j].currentState === 1)
                    {
                        newHtml += `<td class="eachTD" id="rnc${i}${j}" style="background-color:#1A4876"></td>`
                    }	
                    else if(json.rows[i][j].currentState === 2)
                    {
                        newHtml += `<td  class="eachTD"  id="rnc${i}${j}"  style="background-color:#FFFFFF"></td>`
                    }
                }
                newHtml += "</tr>";  
            }
            var fullNewHtml = "<table>"+newHtml+"</table>" 
            +`<button type="button">Check</button>` + "<br>" + "<br>"
            +`<label><input type="checkbox" name="show">Show correct squares</label>`;
            theGameDiv.innerHTML = fullNewHtml;

            for(var m=0;m<json.rows.length; m++)
            {
                for(var n=0; n<json.rows[m].length; n++)
                {
                    var element = document.getElementById(`rnc${m}${n}`);
                    if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===0)
                    {
                        element.addEventListener("click", function(e){
                          json.rows[m][n].currentState === 1;
                        });
                    }
                    else if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===1)
                    {
                        element.addEventListener("click", function(e){
                            console.log("bbbb");
                        });
                    }
                    else if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===2)
                    {
                        element.addEventListener("click", function(e){
                            console.log("cccc");
                        });
                    }
                }
            } 
        })
    }; 
})();

我的思路是（45行开始）：对每一个格子getElementById，然后addEventListener，当我点击currentState ===0的格子时，把currentState 的值变为1；当我点击currentState ===1的格子时，把currentState 的值变为2；当我点击currentState ===2的格子时，把currentState 的值变为0；

问题来了：
这样做的时候报错了（错在48行），显示“Uncaught TypeError: Cannot read property '6' of undefined
at HTMLTableCellElement.<anonymous> (game.js:48)”

其中“6”是6行6列的意思吧我想。不知道property '6' 在哪里，也不知道错在什么地方。
求高人指点一二。

[天际的海浪]

在事件中使用外面的循环变量需要用闭包保存循环变量当时的值

            for(var m=0;m<json.rows.length; m++)
            {
                for(var n=0; n<json.rows[m].length; n++)
                {
                    (function(m,n) {
                        var element = document.getElementById(`rnc${m}${n}`);
                        element.addEventListener("click", function(e){
                            if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===0)
                            {
                                json.rows[m][n].currentState = 1;
                                element.style.backgroundColor = "#1A4876";
                            }
                            else if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===1)
                            {
                                console.log("bbbb");
                            }
                            else if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===2)
                            {
                                console.log("cccc");
                            }
                        });
                    })(m,n);
                }
            } 

[console.log( )]

你48行不应该是赋值的吗，为啥用===？ 还是我没看懂

[Z.Chen]

引用 1 楼 console.log( ) 的回复:

你48行不应该是赋值的吗，为啥用===？ 还是我没看懂

感谢回复。打错了，已改正。 但是结果还是一样的，报错。

[Z.Chen]

怎么改不了。。。。48行应该是只有一个等号“=”

[Z.Chen]

引用 4 楼 天际的海浪 的回复:

在事件中使用外面的循环变量需要用闭包保存循环变量当时的值

            for(var m=0;m<json.rows.length; m++)
            {
                for(var n=0; n<json.rows[m].length; n++)
                {
                    (function(m,n) {
                        var element = document.getElementById(`rnc${m}${n}`);
                        element.addEventListener("click", function(e){
                            if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===0)
                            {
                                json.rows[m][n].currentState = 1;
                                element.style.backgroundColor = "#1A4876";
                            }
                            else if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===1)
                            {
                                console.log("bbbb");
                            }
                            else if(json.rows[m][n].canToggle === true && json.rows[m][n].currentState ===2)
                            {
                                console.log("cccc");
                            }
                        });
                    })(m,n);
                }
            } 

感谢大神！！