Identifying the empty "cell" with the idx

[plusflora]

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

I am trying to identify the index of the empty cell. I tried assigning a new constant to it but it returns -1

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

function handleChoice(evt) {
    //if the option clicked is not a "tile" return. we do this by searching for the class empty
    // because I can get the idx of the target and not the array, I can check +1 and -1 for tiles to the right and +3 and -3 for tiles above and below. 
    const colIdx = cellEls.indexOf(evt.target)
    const emptyIdx = cellEls.indexOf('#cell.empty')
        console.log('this is emptyIdx inside of handleChoice', emptyIdx)
        console.log('this is colIdx inside of handleChoice', colIdx)
    if(evt.target.classList.contains('tile')) {
        // console.log('this is what was clicked: \n', evt.target.className)
        //if the clicked tile contains the class of 'tile', it looks for a connected tile without the same class, 
    } else {return}

    //after every move, we want to check for win
    //after every move, we want to render changes
}

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

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

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

I think I'm just looking at it the wrong way.

What things have you already tried to solve the problem?

Honestly, this just feels like I tried a different way of what I was working on yesterday and couldn't get it then either. I have no idea what I should be looking at, at this point.

Paste a link to your repository here

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

[timmshinbone]

I think the issue is coming from this line:

const emptyIdx = cellEls.indexOf('#cell.empty')

I think you probably need to find another way of identifying this empty cell

[plusflora]

Yeah, that's kinda what I've been trying to do. I've gotten a handful of things like this

[timmshinbone]

Ok let's start at the top of the function then and figure this thing out, console log evt.target and read through the values that print out for that specific element, look for anything that is a unique identifier, or something that implies what you've clicked on, and share your findings and thoughts here

[plusflora]

My thought which goes back to where I think I'm spinning my wheels is that I see the existence of the class empty within the id of cell. Also, the lack of innerText. Which to be fair was my first thought yesterday but figured since I'd need to change classes for the css to take hold, it was going to be easier to look for classes.

Edit: I've also tried removing the empty class and looking for a lack of the tile class but couldn't find anything like that online. At least not for classes.

[timmshinbone]

Ok, we're getting somewhere here, so seeing that I'm noticing a BIG issue, that needs to be addressed before moving on.

<div id="cell" class="c1r2 tile">8</div>
<div id="cell" class="c2r2 tile">8</div>

The problem is this, id's are meant to be unique, only used on one element at a time, so the values 'cell' and the identifier classes you have need to be swapped so it looks like this:

<div id="c1r2" class="cell tile">8</div>
<div id="c2r2" class="cell tile">8</div>

Then you can use the id as it was intended, as a unique identifier

[plusflora]

Aight, so hopefully I've followed what you mean here and I went back and followed along with the connect 4 lesson a little but the lesson, you get whereas I am getting undefined in the array.

Now, I hit this point yesterday - getting the undefined - and after doing a bunch of clicking with evt.target and looking at the output - I figured I don't need the colArr because the colIdx is returning a number. I then did some googling and browsed stackoverflow and figured that for horizontal moves I only need to + or - 1 from the current colIdx and for vertical moves I can + or - 3. Which is where I got stuck - and probably went in a huge circle of looking at classes and everything back to this point.

Edit: Looking at this after having typed it all out, my guess is I'm getting undefined because there isn't an array "under" each of these.

[timmshinbone]

Can you share the updated code that those console logs are coming from?

[plusflora]

//handleChoice - checks to see if the piece is a valid option
//checks to see if the piece can move - returns if it can't
function handleChoice(evt) {
    // console.log('this is evt.target within handleChoice', evt.target)
    // because I can get the idx of the target and not the array, I can check +1 and -1 for tiles to the right and +3 and -3 for tiles above and below. 
    const colIdx = cellEls.indexOf(evt.target)
    console.log('this is colIdx inside of handleChoice', colIdx)

    const colArr = board[colIdx]
    console.log('this is colArr inside handleChoice', colArr)
    // var emptyIdx = cellEls.indexOf('.empty')
    // console.log('this is emptyIdx inside of handleChoice', emptyIdx)
    //if the option clicked is not a "tile" return. we do this by searching for the class empty
    if(evt.target.classList.contains('tile')) {
        // console.log('this is what was clicked: \n', evt.target.className)
        //if the clicked tile contains the class of 'tile', it looks for a connected tile without the same class, 
        //determine the column and row selected

        //update the value of the board array

    } else {return}

    //after every move, we want to check for win
    //after every move, we want to render changes
}

[timmshinbone]

ok, share what the 'board' looks like as well

[plusflora]

function init() {
    //starting state on page load

    //builds board
    board = [
        [0, 0, 0], //column 0
        [0, 0, 0], //column 1
        [0, 0, 0], //column 2
    ]

    //sets moveCount
    moveCount = 0;
    //call render function when built
    render()
}
init()

[plusflora]

update: I am getting an array but only off the top 3.

[timmshinbone]

ok we'll jump into a breakout room soon

[plusflora]

Ok, here's an idea. I changed what I was working on and made an What if instead of a board that looks like this in JS

    board = [
        [0, 0, 0], //column 0
        [0, 0, 0], //column 1
        [0, 0, 0], //column 2
    ]

I instead do

    board = [/*row 1*/ 0, 0, 0, /*row 2*/ 0, 0, 0, /*row 3*/ 0, 0, 0] 

wouldn't that let me do the same thing? it's probably not as clean but it gives me the colIdx that I can use. the colArr doesn't matter and I can maybe do the + or - 1 thing to check horizontally?

[timmshinbone]

Decided on a new direction