Trying to show 2 tile images per round, then turn them back over (concentration game)

[DaceyForward]

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

My tiles are clickable, but only one at a time right now. I want the first clicked tile to stay up (show image) while the second tile is clicked. If they are not a match, I want them both to turn back over (show grey tile).

Right now, the strategy I'm using is adding an HTML element to hold the image when clicked, then removing it. Is this a reasonable way to do this, or will this cause issues later down the line?

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

function renderBoard() {
    let idx = 0
    console.log('renderBoard tileClicked array', tileClicked)
    imageSet.forEach(function(image) {
        let images = document.createElement('img')
        images.src = imageSet[idx].image
        images.style.width = '18vmin'
        images.style.height = '18vmin'
        if (tileClicked[idx] === true) {
            console.log('bananas')
            document.getElementById(`tile${idx}`).appendChild(images) 
            tileClicked[idx] = false
        }else if(imageFaceUp[idx] === true) {
            console.log('inside imageFaceUp[idx] else if. idx is', idx)
        console.log(images)    
        document.getElementById(`tile${idx}`).innerHTML = '' 
        }
        idx += 1
    })
}

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

No errors show

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

Not a specific problem yet, I just need to keep working. I just know there is a time limit and I don't want to go down the wrong path and have to start over. I had most everything working until I tried making certain tile images appear at certain times, which I thought I could do with a different strategy, but it didn't work out.

What things have you already tried to solve the problem?

I was stuck on how to remove (not show the image) the element after adding it, but fixed that. Now I'm just trying to broaden that to two images.

Paste a link to your repository here

https://github.com/DaceyForward/Project-1-Concentration-Game.git

[asands94]

There are a lot of ways to handle this. If you're trying to have both images show, then you can do some kind of counter variable like it seems you have that tracks how many times you've clicked on the board and if it gets to a certain number then the previous two cards can be turned back over (set to their initial state).

For the way you're going about it now, I would test it out with one card, then see if it works on all cards.

[DaceyForward]

Now I can make that work, but can't seem to get a setTimeout function to work to show two unmatched tiles together before turning back over. The timeout function gives an error that says: Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

[asands94]

If you're getting that TypeError, I would look at innerHTML and see what it's attached to and do a console log. For example, if you have variableName.innerHTML, then I would look at why variableName is null and check that you are referencing the correct thing