使用 pokemon tcg api 创建一个简单的 web

Question

我们正在尝试根据口袋妖怪不同的卡片生成选择选项，它们的值是那一代卡片的图像，然后我们希望事件侦听器检查我们的点击，该点击获取值并更改照片。

我遇到的问题是我试图访问嵌套在我的条件中的选项的本地变量，我似乎无法弄清楚如何访问它，所以我可以让事件侦听器按照我的方式工作打算这样做。

代码：

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

Answer 1

你需要放

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

进入这样的条件：

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;

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

还要注意poke.toLowerCase() === card.name.toLowerCase() 条件。这样，如果用户使用大写字母输入名称，您将防止找不到口袋妖怪的情况。