Javascript 如何修复此TictaToe的未捕获引用错误

我正在做一个HTML、CSS、JSS TictatoE项目，我遇到了一个错误，当我尝试在文本编辑器中使用console.log时，console功能区/部分（在浏览器中单击鼠标右键并转到“检查”时）说明了以下内容：

“未捕获引用错误：未定义左上角”
如果（topLeft&&topLeft==topMiddle&&topLeft==topRight）{

我的代码：

             // HTML Elements
const statusDiv = document.querySelector('.status');
const resetDiv = document.querySelector('.reset');
const cellDivs = document.querySelectorAll('.game-cell');
//NEW querySelecterAll <= will grab every occurrence put in ('') 
//Grabbing statusDiv to manipulate it (change when it'll x or o's turn)

            //Game Variables
let gameIsLive = true; 
//statement would be false if someone won/ game ended 
let xIsNext = true; 
//meaning if it's T = x's turn, if it's F = O's turn

           // Functions
const checkGameStatus = () => {
const topLeft = cellDivs[0].classList[2];
const topMiddle = cellDivs[1].classList[2];
const topRight = cellDivs[2].classList[2];
const middleLeft = cellDivs[3].classList[2];
const middleMiddle = cellDivs[4].classList[2];
const middleRight = cellDivs[5].classList[2];
const bottomLeft = cellDivs[6].classList[2];
const bottomMiddle = cellDivs[7].classList[2];
const bottomRight = cellDivs[8].classList[2];
}

           // Check Winner
if (topLeft && topLeft === topMiddle && topLeft === topRight) { 
console.log(topLeft);
}

//HTML元素
const statusDiv=document.querySelector（'.status'）；
const resetDiv=document.querySelector（'.reset'）；
const cellDivs=document.querySelectorAll（“.game cell”）；
//新QuerySelecteral{
const topLeft=cellDivs[0]。类列表[2]；
const topmidle=cellDivs[1]。类列表[2]；
const topRight=cellDivs[2]。类列表[2]；
const middleft=cellDivs[3]。类列表[2]；
const middleMiddle=cellDivs[4]。类列表[2]；
const middleRight=cellDivs[5]。类列表[2]；
const bottomLeft=cellDivs[6]。类列表[2]；
const bottomMiddle=cellDivs[7]。类列表[2]；
const bottomRight=cellDivs[8]。类列表[2]；
}
//支票赢家
如果（topLeft&&topLeft==topMiddle&&topLeft==topRight）{
控制台日志（左上角）；
}

我所做的代码似乎与视频相同，因此我不确定为什么会收到此错误

工具书类

• GitHub

教程中的人有自己的GitHub和代码

• Youtube

这将是我目前正在进行的流程

我之前发布过一个类似的问题，这是我第一次关闭一个问题。有点担心它可能会再次关闭，因此请告诉我问题中我做错了什么部分。

您的问题在于。您正在该块中声明变量：

const checkGameStatus=（）=>{
const topLeft=cellDivs[0]。类列表[2]；
[...]
}

但是你试图访问块外的变量，而这些变量并不存在

相反，在块外部初始化变量，然后分配值：

左上角；
const checkGameStatus=（）=>{
topLeft=cellDivs[0]。类列表[2]；
[...]
}
检查游戏状态（）
如果（topLeft&&topLeft==topMiddle&&topLeft==topRight）{
控制台日志（左上角）；
}

进一步解释块范围的链接非常有帮助！我正在尝试找出是否可以通过评论发送图像来显示一两个屏幕截图，因为我很难找到解释我当前情况的方法；在遵循您所说的内容后，我不再得到未定义的错误，但控制台似乎没有显示如果在网格的顶行中有直接的x或o，则为x或o。您必须调用

checkGameStatus（）

在您检查控制台输出之前。感谢您抽出时间回答我的问题。我正在阅读一些关于调用内容、调用和调用之间的区别等的背景信息。从我收集的信息来看，调用是为了返回一些内容。我对编码还是很陌生，所以它不是真正的“连接”在我看来可以这么说。你能详细说明并可能解释一下这将如何应用于Tictatcoe代码吗？我修改了上面的代码以向你展示我的意思。谢谢你的耐心！我有一项任务到期了，我需要集中精力，因此我的反应延迟了。现在，我可以开始检查代码a了现在它可以工作了！谢谢你给我详细的解释。自学编码，努力找出错误并从中吸取教训是很困难的，所以当像我这样的初学者得到这样有用的指导时，真的会有很大的不同！