how would you handle moving colors

[ItsAlbi007]

What's the problem you're trying to solve?

So i have red and blue checkers and when i click one of the checkers there will be a yellow square that opens to where the checker can move either left of right and if i don't want to move that checker i unclick it yellow goes away and got that to work on red only but the blue one wont work i keep getting en error and i cant figure it out for some reason !!

Post any code you think might be relevant (one fenced block per file)

function resetLastColor (e){
   console.log(e)
   if (lastCheckerClick){
    console.log(lastCheckerClick)
    const clickedEL = document.querySelector(`#${lastCheckerClick}`)
    const col = parseInt(clickedEL.id[1])
     const row = parseInt(clickedEL.id[3])
   console.log(clickedEL)
     if (clickedEL.child.classList.contains("red")){
    const diagonalOne = document.querySelector(`#c${col -1}r${row +1}`)
     const diagonalTwo = document.querySelector(`#c${col -1}r${row -1}`)
    diagonalOne.style.backgroundColor = ""
    diagonalTwo.style.backgroundColor = ""
     } else if (clickedEL.child.classList.contains("blue")){
      const diagonalOne = document.querySelector(`#c${col +1}r${row +1}`)
     const diagonalTwo = document.querySelector(`#c${col +1}r${row -1}`)
      diagonalOne.style.backgroundColor = ""
      diagonalTwo.style.backgroundColor = ""
     }
   }
 }

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

main.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'classList') at resetLastColor (main.js:22:25) at firstClick (main.js:54:3) at HTMLDivElement. (main.js:45:11) resetLastColor @ main.js:22 firstClick @ main.js:54 (anonymous) @ main.js:45

What is your best guess as to the source of the problem?

what i wrote up in the code was my best guess but kept getting the same issue and went to office hours and he couldn't figure it out either so to be honest i know we are supposed to think of a way how to guess even if we are wrong just say it i really have zero idea because i dont think the code is wrong

What things have you already tried to solve the problem?

changing the words mostly in the ( ___ )

Paste a link to your repository here

https://github.com/ItsAlbi007/G-Project

[timmshinbone]

So, it's trying to read the classList of something, looks like clickedEl, add console logs to see if you're grabbing that element correctly. Looks like the problem is stemming from this line, so let's break this down and see if you need to rework it.

const clickedEL = document.querySelector(`#${lastCheckerClick}`)

What shows up when you console log the 'clickedEL`?

[ItsAlbi007]

[ItsAlbi007]

i was told from one of the class mates to render this

[timmshinbone]

Is that the clickedEL?

[ItsAlbi007]

i figured it out what the problem was i had to rewrite it bc things were all over the place and i was calling the wrong this so made some lil changes and now it works all they colors reset and do what they are supposed to do