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

Question

我正在做一个 HTML、CSS、JSS tictactoe 项目，我 运行 进入控制台 ribbon/section 的错误（当右键单击并转到在浏览器中“检查”）在我尝试在我的文本编辑器中使用 console.log 时说明了以下内容：

“未捕获的 ReferenceError：topLeft 未定义”
if (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);
}

我做的代码好像和视频一样，所以我不确定为什么会收到这个错误。

参考资料

• GitHub

教程中的人有自己的 GitHub，代码为 enter link description here

• YouTube

这将是我目前在流程中所处的位置 enter link description here

我之前发过类似的问题，这是我第一次关闭问题。有点担心它可能会再次关闭，所以请让我知道我的问题中哪一部分做错了。

Answer 1

您的问题与 block scoping 有关。您在此块中声明变量：

const checkGameStatus = () => {
  const topLeft = cellDivs[0].classList[2];
  [...]
}

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

而是在块外初始化变量，然后赋值：

let topLeft;

const checkGameStatus = () => {
  topLeft = cellDivs[0].classList[2];
  [...]
}

checkGameStatus()

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