Event Handler Functions and Visibility Problems

[Clund1]

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

• I can't figure out how to get any of my Event Listeners to work as intended
• My timeout/hide function doesn't work as intended

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

    forest.generateHidingSpots() //This generates random spawn of goblins on forest
    goblinEls.forEach((tile) =>{
            id = tile.id;
            tileArrPosition = forest.goblins[parseInt(id[1])][parseInt(id[3])]; // takes ID of each goblin space to formulate reference
            //console.log(tileArrPosition);
            //console.log(tile);
            tile.style.backgroundImage = FORESTLOOKUP[tileArrPosition]; //uses FORESTLOOKUP to ref. background image choice
            })
    setTimeout(hide,5000); //5 seconds to memorize then hide
}

//HIDES CHOICES
function hide(){
    goblinEls.forEach((goblin) =>{
        goblin.style.backgroundImage = "";
        console.log(goblin)
    })
}

//DETERMINES IF MATCH IS TRUE OR FALSE
function playerChoice (choice1, choice2){ //Player Choice will always contain 2 choices
    if (choice1 === choice2){
        return correctMatch++; //if choices are equal return ++truthy value
        }else{
        return wrongMatch++; //if choice are different return ++falsey value
    }
}

//DETERMINES WIN
function determineWin(){
    const winner = (correctMatch === 6); //if player makes 6 correct matches, they win
    const loser = (wrongMatch === 4); //if player makes 4 wrong matches, they lose
    if (winner === true){ //if WIN remove gameboard and add win text
        forest.style.display = "none"
        messageEl.innerText = 'YOU HAVE WON!';
        }
    if(loser === true){ // if LOSE remove gameboard and add loss text
        forest.style.display = "none";
        messageEl.innerText = 'YOU HAVE LOST!';
        playButton.style.backgroundColor = "antiqueWhite";// 'hides' functionality
        playButton.style.color = "black";
    }
}

/Takes tileArrPosition of goblin div and gives it to choice1 or choice 2
    //on click of goblin tile store tileArrPosition
goblin.addEventListener('click',(e)=>{
    forEach (goblin.e)
    //PUSH tileArrPosition into Choice 1 and Choice 2 Variables
    let Choice1 = goblin.e.tileArrPosition;
    let Choice2 = goblin.e.tileArrPosition; 
})

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

Im not sure how to organize the event listener to gather the correct information i need

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

Genuinely no idea, Tylus ran into trouble helping me as well

What things have you already tried to solve the problem?

MDN, W3 research, tried nesting the eventListener in the initialLaunch function but it gave unpredictable results. Now im trying a forEach to gather the info I need but I cant factor it correctly.

I'm in dire need of a 1 on 1 help meeting.

Paste a link to your repository here[

](https://github.com/Clund1/Project-1---GAME/blob/main/script.js)

[timmshinbone]

There's a problem in this code here:

/Takes tileArrPosition of goblin div and gives it to choice1 or choice 2
    //on click of goblin tile store tileArrPosition
goblin.addEventListener('click',(e)=>{
    forEach (goblin.e)
    //PUSH tileArrPosition into Choice 1 and Choice 2 Variables
    let Choice1 = goblin.e.tileArrPosition;
    let Choice2 = goblin.e.tileArrPosition; 
})

forEach has to be attached to an array, and I'm not sure you want that to happen inside the eventlistener. Grab the goblinEls like you had them before, as a nodelist, so you can run a forEach on them and add the event listener inside the iteration. If you can't get that working, we'll take a look in a 1:1 shortly after deployment party

[Clund1]

Fixed the listener but still having errors logging the tileArrPosition ito Choice1 or Choice2

[timmshinbone]

Ok, we can look at this in a 1:1 real shortly!

[timmshinbone]

We resolved this by targeting a specific identifier and saving those to a variable, then checked those values against each other