So im creating a simple web using the pokemon tcg api

by

// 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)
} )

6 thoughts on “So im creating a simple web using the pokemon tcg api”

  1. You need to put

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

    Into the conditional like this:

    fetch(url)
        .then((res) => res.json())
        .then((data) => {
            data.data.forEach(card => {
                if (poke.toLowerCase() === 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;

                    document.querySelector('option').addEventListener('click', function () {
                        img.src = option.value;
                    });
                }
                console.log(img.src);
            });
            console.log(data);
        }).catch((err) => console.log(err));

    Also notice the poke.toLowerCase() === card.name.toLowerCase() condition. This way you will prevent case where no pokemon is found, if user will put name with capital letters.

    Reply

Leave a Comment