So im creating a simple web using the pokemon tcg api

// we are trying to make a selection of options based on the pokemon different card generations with their value being the image of that generation of the card, then we want an event listener to check for a click us that takes the value and changes the photo.

// the problem I am running into is I’m trying to access the local var of options that’s nested in my conditional and I can’t seem to figure out how to access it so I can make the event listener work the way I intend it to.

// Code//

document.querySelector('#form').addEventListener('submit', getPokemon)

const img = document.querySelector('#img')
const sel = document.querySelector('#curPoke')







function getPokemon (e) {
e.preventDefault();
const poke = document.querySelector('#input').value.toLowerCase(); 
const url = `https://api.pokemontcg.io/v2/cards`;

fetch(url)
.then((res) => res.json())
.then((data) => {
   
    data.data.forEach(card => {
   


        if(poke === card.name.toLowerCase()){
            let option = document.createElement('option')

            option.textContent = `${card.name} ${card.id}`

            option.value = card.images.large;
            option.classList.add('gen')
            sel.append(option)
            sel.classList.remove('hide')

            img.src = option.value

            // console.log(card)
            // console.log(option.value)

            
        }
        console.log(img.src)

    })

    console.log(data)
}).catch((err)=> console.log(err))
}

document.querySelector('option').addEventListener('click', function(){
img.src = option.value 
} )





sel.addEventListener('click', function(){
// img.src = option.value
console.log('click') 
const opt = document.querySelector('.gen')
console.log(opt)
} )