有效，但未捕获引用错误：当我在控制台中键入数组时未定义数组

我用 js 制作了一个 Tic Tac Toe 游戏，我有几个数组。

- 一个用于 html td 元素（网格）
- 用于查看它们之前是否被点击过 (boolGrid)
-还有一个用颜色检查结束条件（colorgrid）

我使用 var 关键字及其内容在全局范围内定义了所有这些，现在游戏确实可以运行，但是当我在控制台中输入它们的名称时，它会给出 Uncaught ReferenceError: array is not Defined。我想知道这是怎么回事，因为我下一步正在尝试制作 OXO 游戏。

这是代码的链接，
井字游戏：https://jsfiddle.net/NeuroTypicalCure/0k73umd1/3/ https://jsfiddle.net/NeuroTypicalCure/0k73umd1/3/
我在 OXO 上的进展：https://jsfiddle.net/NeuroTypicalCure/vdz5q97v/ https://jsfiddle.net/NeuroTypicalCure/vdz5q97v/（显然未完成）

    var grid = [
    document.getElementById("a").children[0],
    document.getElementById("a").children[1],
    document.getElementById("a").children[2],
    document.getElementById("b").children[0],
    document.getElementById("b").children[1],
    document.getElementById("b").children[2],
    document.getElementById("c").children[0],
    document.getElementById("c").children[1],
    document.getElementById("c").children[2],
];
var boolGrid = [
    false,false,false,
    false,false,false,
    false,false,false
];
var colorGrid = [
    "grey","grey","grey",
    "grey","grey","grey",
    "grey","grey","grey"
];
var resetButton = document.getElementById("rb");

var color = "green";
var clicks = 0;

function allTiles(color){
    for(var i=0;i<grid.length;i++){
        grid[i].style.backgroundColor = color;
        boolGrid[i] = true;
    }
}
function init(){
    for(var i=0;i<grid.length;i++){
        grid[i].style.backgroundColor = "grey";
        boolGrid[i] = false;
        colorGrid[i] = "grey";
    }
}
function listen(arr,num){
    arr[num].addEventListener("click",function(){
            if(clicks == 0 || clicks%2 == 0){
                color = "green";
            }else{
                color = "red";
            }
            if(boolGrid[num] === false){
                arr[num].style.backgroundColor = color;
                boolGrid[num] = true;
                colorGrid[num] = color;
                clicks++;
                checkEnd("green");
                checkEnd("red");
            }
        });
}
function addEventListeners(){
    for(var i=0;i<grid.length;i++){
        listen(grid,i);
    }
}
function checkEnd(color){
    // ----------------- horizontal --------------
    if(colorGrid[0] === color && colorGrid[1] == color && colorGrid[2] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[3] === color && colorGrid[4] == color && colorGrid[5] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[6] === color && colorGrid[7] == color && colorGrid[8] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    //------------ vertical --------------
    if(colorGrid[0] === color && colorGrid[3] == color && colorGrid[6] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[1] === color && colorGrid[4] == color && colorGrid[7] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[2] === color && colorGrid[5] == color && colorGrid[8] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    // ------------------ diagonal -------------------
    if(colorGrid[0] === color && colorGrid[4] == color && colorGrid[8] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[2] === color && colorGrid[4] == color && colorGrid[6] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
}
init();
addEventListeners();
resetButton.addEventListener("click",function(){
    init();
})

请随时给我留下任何提示或更正，提前谢谢:)

祝您的项目好运，
-T

正如您所指定的，游戏运行良好，失败的是当您尝试使用失败的控制台（在 JSFiddle 中？）访问变量时。发生这种情况有两个原因：

1. 控制台的上下文。
2. 变量的范围。

稍微简化一下：控制台的上下文是将受控制台操作影响的文档。默认情况下，在 Chrome 中，上下文位于顶部框架，但可以使用左上角的下拉菜单进行更改：

在您的情况下，您正在使用 JSFiddle，并且 JSFiddle 使用iframe显示结果。如果控制台的范围是“”，那​​么您将无法从结果窗口访问变量。您需要将下拉列表更改为“结果（fiddle.jshell.net/）”值。

但是，即使您这样做，您仍然会收到错误。这是为什么？因为第二个原因：变量的范围。再次简化一下，变量作用域是程序中可以查看/访问变量的部分。它可以是整个应用程序（全局变量）或只是它的一部分（局部变量）。

就您而言，您正在使用var函数内的关键字（即使您不认为在函数内使用它，实际上您为 JavaScript 执行选择了“加载时”，这会将您的代码包装在窗口加载时执行的匿名函数内） ，这使得所有变量都成为该函数的局部变量。

当您尝试从控制台打印变量时，无法访问它们，因为它们的作用域是该特定函数并且它们不存在于该函数之外。为了解决这个问题：

• 通过删除使变量成为全局变量var关键词。不建议使用此选项，因为它可能会产生意外结果（任何函数都可以访问该变量，并且调试/维护可能会成为一场噩梦）；或者

• 不要使用“onLoad”选项来执行 JavaScript，而是使用“No wrap - in

  ”。这样你的代码就不会被包装在window.onload=function(){ }，但直接进入<script>在身体的底部。

尽管从技术上讲，您正在做的是将变量设为全局变量（因为即使var，它们位于所有功能之外，因此任何人都可以访问）。

tl;dr;- 解决问题：

1. 将控制台的上下文更改为 iframe。
2. 更改变量的范围，以便控制台可以访问它们。