Trying to connect event listeners to referenced value in render function

[Clund1]

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

My correct/wrong match functions uses values that are referenced in a "click" event made in the function that renders the game board. I'm having trouble getting this to fill my choice1 and choice2 variables to then fulfill a win condition.

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

//RENDER GAME PLAYING FIELD//
function renderForest(){
    boardArr= []
    for (let i = 0; i < 25; i++) {
        boardArr.push(Math.floor(Math.random() * 6))
    }
    let tiles= document.querySelectorAll(".box")
    tiles.forEach((tile)=>{
        tile.addEventListener('click',()=>{
            id = tile.id
            tileArrPosition = boardArr[id]
            tile.style.backgroundColor = FORESTLOOKUP[tileArrPosition]
    })
}}

//DETERMINES IF MATCH IS TRUE OR FALSE
let 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)
    const loser = (wrongMatch === 4)
    if (winner === true){
        return true
        }
    if(loser === true){
        return false
    }
}

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

No error messages but I cant find a way to nest the functions correctly to work in scope of each other so they can keep relaying the value if that makes any sense?

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

Genuinely not quite sure

What things have you already tried to solve the problem?

Ive tried nesting the functions in order of when the variables are first initialized and used but I can never quite get it to work

Paste a link to your repository here[

](https://github.com/Clund1/Project-1---GAME)

[timmshinbone]

So what's the current behavior that is erroneous, the code looks good from here, but, what is happening vs what do you want to be happening?

[Clund1]

I'm trying to code the initial render function so it uses the values from the tile event Listener in renderForest in the next function playerChoice,

function render() {
    renderForest()
    playerChoice()
}
render()

Nothing necessarily bad is happening, Im just failing to see why i cant seem to take the Tile Id and place it into the playerChoice function. but since its technically made from a click on forEach loop, the scope doesn't seem to interact if that makes sense?

[Clund1]

I'm not sure how to go about using callback functions to go through 3 seperate functions and carry the information i need

[nayaba]

So this is a question of scope - if a variable value needs to be accessible across all functions, perhaps it needs to be defined outside of all functions (remember it's value can be updated at any time.

[Clund1]

So I have my everything set that need to be saved in my initial let variables like so

let boardArr= null
let choice1 
let choice2
let correctMatch = 0
let wrongMatch = 0
let id= 0

so if i return the id at the end of the click function like this

 let tiles= document.querySelectorAll(".box")
    tiles.forEach((tile)=>{
        tile.addEventListener('click',()=>{
            id = tile.id
            tileArrPosition = boardArr[id]
            tile.style.backgroundColor = FORESTLOOKUP[tileArrPosition]
            return id

I could use the new id in the render function like this?

function render() {
    renderForest()
    playerChoice(id,id)
    determineWin()
}

Its like I have all the pieces but I feel like i might be missing something

[nayaba]

So in looking at your full code, I see we have an event listener on the entire gameField, which it looks like triggers a scatter function. Is that scatter function randomizing the matches? If so, it makes sense to me that we would actually run that function within the init or render functions so that it happens automatically upon loading the game.

Once the matches have been randomized we will want an event listener on our individual boxes. That event listener might trigger a function which records what box was clicked on into a variable (maybe choice1 and choice2?)