可以，但是Uncaught ReferenceError:当我在控制台中键入数组时，未定义该数组 [英] Works, but Uncaught ReferenceError: array is not defined when i type it in console

问题描述

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

I made a Tic Tac Toe game in js and i have a couple of arrays.

-一个用于html td元素(网格)的
-一看它们是否在(boolGrid)之前被单击
-然后用颜色(colorgrid)检查结束条件

-One for the html td elements (grid)
-One to see if they have been clicked on before (boolGrid)
-And one to check the end condition with colors (colorgrid)

我使用var关键字及其内容在全局范围内定义了所有这些内容，现在游戏可以正常工作了，但是当我在控制台中键入它们的名称时，它给了我Uncaught ReferenceError:数组未定义.我想知道这是怎么回事，因为我接下来尝试制作OXO游戏.

I defined all of these in global scope with the var keyword and their contents, now the game does work but when i type their name in the console it gives me the Uncaught ReferenceError: array is not defined. I'm wondering what's up with that since i am trying to make an OXO game next.

以下是代码的链接，
TicTacToe: https://jsfiddle.net/NeuroTypicalCure/0k73umd1/3/
我在OXO上的进度: https://jsfiddle.net/NeuroTypicalCure/vdz5q97v/(显然未完成)

Here are the links to the code,
TicTacToe: https://jsfiddle.net/NeuroTypicalCure/0k73umd1/3/
My progress on OXO: https://jsfiddle.net/NeuroTypicalCure/vdz5q97v/ (clearly unfinished)

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

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

Feel free to leave me any tips or corrections, thx in advance :)

在您的项目中表现最好，
-T

Best of luck on your projects,
-T

推荐答案

如您所指定的，游戏运行正常，失败是当您尝试使用失败的控制台(在JSFiddle中)访问变量时.发生这种情况有两个原因:

As you specified, the game works fine, what fails is when you try to access a variable using the console (in JSFiddle?) that fails. That happens for two reasons:

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

简化一点:控制台的上下文是受控制台操作影响的文档.在Chrome中，默认情况下，上下文是顶部框架，但可以使用左上角的下拉菜单来更改它:

Simplifying a bit: the context of the console is the document that will be affected by the console actions. By default in Chrome, the context is the top frame, but it can be changed using a dropdown at the top left corner:

在您的情况下，您正在使用JSFiddle，而JSFiddle使用iframe来显示结果.如果控制台的范围是< top frame>"，则您将无法从结果窗口访问变量.您需要将下拉列表更改为结果(fiddle.jshell.net/)"值.

In your case, you are using JSFiddle, and JSFiddle uses an iframe to show the results. If the scope of the console is the "<top frame>", then you will not be able to access the variables from the result window. You need to change the dropdown to the "result (fiddle.jshell.net/)" value.

但是，即使这样做，您仍然会收到错误消息.这是为什么?由于第二个原因:变量的范围.再次简化一点，变量作用域是程序中可以查看/访问变量的部分.它可以是整个应用程序(全局变量)，也可以只是一部分(局部变量).

But, even if you do that, you will still get the error. Why is that? because of the second reason: the scope of the variable. Again simplifying a bit, a variable scope is the part of the program that can see/access the variable. It can be the whole application (global variable) or just a part of it (local variable).

在您的情况下，您在函数内部使用了var关键字(即使您不认为自己在函数内部使用了它，实际上也与为JavaScript执行选择加载时"一样)会将您的代码包装到在窗口加载时执行的匿名函数中)，并使所有变量都在该函数本地.

In your case, you are using the var keyword inside a function (even if you don't think that you are using it inside a function, you actually are as you selected "On load" for the JavaScript execution and that will wrap your code inside an anonymous function executed on window load), and that makes all the variables local to that function.

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

When you try to print the variables from the console, they cannot be accessed because their scope was that particular function and they don't exist outside of it. To solve this:

• 通过除去var关键字使变量成为全局变量.不建议使用此选项，因为它可能会导致意外的结果(任何函数都可以访问该变量，调试/维护可能会成为噩梦)；或者

• Make the variables global by removing the var keyword. This option is not recommended as it could have unexpected results (the variable could be accessed by any function and debugging/maintenance could become a nightmare); Or

不要使用"onLoad"选项来执行JavaScript，而应使用"No wrap-in< body>".这样，您的代码将不会被包裹在window.onload=function(){ }中，而是直接进入主体底部的<script>中.

Instead of using the "onLoad" option for executing the JavaScript, use the "No wrap - in <body>". That way your code will not be wrapped in window.onload=function(){ }, but go directly in a <script> at the bottom of the body.

尽管从技术上讲，您正在做的是使变量成为全局变量(因为即使使用var，它们也位于所有函数之外，因此任何人都可以访问它们.)

Although technically, what you are doing is making the variables global (because even with var, they are outside of all functions so they'd accessible by anyone).

tl; dr; -解决问题:

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

这篇关于可以，但是Uncaught ReferenceError:当我在控制台中键入数组时，未定义该数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！