Changing CSS upon "win"

[plusflora]

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

I'm trying to get my tiles to update their class to change the background color upon hitting the checkWin = true state. I've added a .win class to the bottom of the style sheet but still nothing.

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

//check win - checks to see if tile are in a "win" order
function checkWin() {
    //do i just give it an array here that checks to see if the tiles are in the correct order? 
    //I need it to read the current board array
    let curBoardState = board
    // console.log('this is the current board state in checkWin', curBoardState)
    const winCon = [[0, 1, 2], [3, 4, 5], [6, 7, 8]]
    // console.log('this is winCon inside of checkWin', winCon)
    //and compare it to the winCon array
    //if they match, do something
    function check(curBoardState, winCon) {
        return curBoardState.join() == winCon.join()
    }
    // console.log(checks(curBoardState, winCon))
    if(check(curBoardState, winCon) === true){
        console.log('confirming the curBoardState and winCon match inside checkWin')
        cellEls.forEach((cell) => {
            cell.classList.add('win')
        })
    }
}

// board render/builder
function renderBoard(){
    for (let row = 0; row < board.length; row++) {
        for (let col = 0; col < board[row].length; col++) {
            const index = row * board.length + col;
            // console.log(index)
            const cellEl = cellEls[index];
            // console.log(cellEl)

            const tileNum = board[row][col] + 1;
            // console.log(tileNum)
            //sets the innerText of the tile to 1-8 due to the array that I created above. If the tile has the number 9 - leave it empty - else give it an innertext to match it's number
            cellEl.innerText = tileNum === 9 ? '' : tileNum;
            //if the tile has the number 9 - assign the empty class, else give it tile
            cellEl.className = tileNum === 9 ? 'empty' : 'tile';
        }
    }
}

/*----- grab html elements -----*/
const shuffleButton = document.querySelector('button')
const cellEls = [...document.querySelectorAll('.cell')]
const tileEls = [...document.querySelectorAll('.tile')]
let emptyTile = [...document.querySelectorAll('.cell.empty')]
// console.log(cellEls)

in my css

.win {
    background-color: green;
}

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

Tiles aren't changing color upon hitting the win state. the console log pops out so I assume I've set the win correctly.

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

Probably something in how I ended up getting the tiles setup.

What things have you already tried to solve the problem?

I've tried assigning it to the tile elements as well as the class elements. I've also checked how others have done this and it seems similar.

Paste a link to your repository here

https://github.com/plusflora/Project-1

[nayaba]

If you console.log tileEls and tile within this if statement:

 if(check(curBoardState, winCon) === true){
        console.log('confirming the curBoardState and winCon match inside checkWin')
        cellEls.forEach((cell) => {
            cell.classList.add('win')
        })
    }

what do you get?

[nayaba]

Also in your css, you'll want to give margin-bottom: ; a value

[plusflora]

When setup like this - I get the tiles to change to green.

    if(check(curBoardState, winCon) === true){
        console.log('confirming the curBoardState and winCon match inside checkWin')
        cellEls.forEach((cell) => {
            cell.classList.add('win')
        })
        console.log(tileEls)
        console.log(tile)
    }

but the console kicks this.

if the console.log(tile) is not there, the green does not appear. and I removed the margin-bottom shortly after submitting this ticket.

[plusflora]

On further inspection, it only works if there's an Uncaught Reference Error. What is in the console.log() does not matter, as long as it returns an error, the tiles shift to green as expected.

[plusflora]

And while I was waiting, I went through and cleaned up some code. It works as intended now. I don't know what I did.