2

I am doing a HTML, CSS, JSS tictactoe project, and I have run into an error where the console ribbon/section (when right clicking and going to "inspect" in browser) has stated the following when I tried using the console.log in my text editor:


"Uncaught ReferenceError: topLeft is not defined"
if (topLeft && topLeft === topMiddle && topLeft === topRight) {

my code:

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

The code I have done seems to be the same as the video, so I'm unsure as to why I'm receiving this error.

References

  • GitHub

The person in the tutorial has his own GitHub with the code enter link description here

  • Youtube

This will be where I currently am with the process enter link description here

I posted a similar question before and it was my first time getting a question closed. A bit worried that it might get closed again so if please let me know what part in my question that I did wrong.

KO-d14
  • 115
  • 7

1 Answers1

0

Your issue is with block scoping. You're declaring your variables inside this block:

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

But then you're trying to access the variables outside the block, where they don't exist.

Instead, initialize the variables outside the block, and then assign the values:

let topLeft;

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

checkGameStatus()

if (topLeft && topLeft === topMiddle && topLeft === topRight) { 
  console.log(topLeft);
}
selfagency
  • 1,481
  • 1
  • 9
  • 12
  • The link further explaining block scoping was very helpful! I'm trying to figure out if it's possible to send images on comments to show a screenshot or two as I'm having trouble finding a way to explain my current situation; after following what you said, I no longer get the undefined error but the console doesn't seem to show the output of either x or o when having straight x's or o's in the top row of the grid. – KO-d14 Feb 17 '21 at 07:57
  • You have to invoke `checkGameStatus()` before you check your console output. – selfagency Feb 17 '21 at 07:58
  • Thank you for taking the time to answer my questions. I was reading a bit of background info on what is invoking, the difference between call and invoke, etc. From what I gathered, invoking is to have something returned..? I'm still quite new to coding so it's not really "connecting" in my mind so to say. Could you please elaborate and possibly explain how that would be applied to this TicTacToe code? – KO-d14 Feb 17 '21 at 08:57
  • I modified the code above to show you what I mean. – selfagency Feb 17 '21 at 16:09
  • Thank you for your patience! I had an assignment that was due which I needed to focus on hence my delay in response. With that now out of the way, I got around to check the code and it now works! Thank you for thoroughly explaining it to me. It is difficult to self-learning coding and trying to pinpoint and learn from our mistakes, so really do make a world of a difference when beginners like me get helpful guidance like this! – KO-d14 Feb 28 '21 at 03:22