javascript async and await event listener: Pokemon

Question

I am working my way through an API exercise I made on my own and was wondering why the "id" element keeps adding unnecessary values to it. For example, I would search "Pikachu" first and the whole result would return Pikachu (data.id is 25) and it's stats. After hitting the next button (event listener), the id gets successfully incremented to the next Pokemon on the list, Raichu (data.id is 26); its stats also show correctly. That condition works perfectly!
Then I would search a different pokemon, "Charmander" and the id value is now "4". However, the problem starts after I do that second search and then hitting the "next" button again. The ID would start off at Raichu's ID and then it'll increment up further, while also incrementing from "4" as well. So my console log started to look like this: "4","27","5","28","6" after each press after the second search, and instead of having Charizard popping up, a few pokemon's after Raichu pop up.
Am I declaring things incorrectly or writing this too complex? I think I was expecting the "id" variable to refresh everytime I search for a pokemon but it seems like it is keeping it going.

function pokemonInfo(e) { 
                   e.preventDefault();
                    const searchValue = search.value
                    fetch(`https://pokeapi.co/api/v2/pokemon/${searchValue}`)
                    .then(res=>res.json())
                    .then(data => {
                        const pokemon = data
                        console.log(pokemon)
                        let id = pokemon.id
                        console.log(id)

next.addEventListener('click', ()=>{
                            id++
                            console.log(id)
                            fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
                            .then(res=>res.json())
                            .then(data => {
                            const pokemon = data
                            pokeName(pokemon);
                            sprtFrnt(pokemon);
                            sprtBck(pokemon);
                            firstType(pokemon);
                            secondType(pokemon);

})
                    })
                    
                        //Other Functions
                        pokeName(pokemon);
                        sprtFrnt(pokemon);
                        sprtBck(pokemon);
                        firstType(pokemon);
                        secondType(pokemon);
                        
                    })
                    .catch(err => {
                        const notFound ='This Pokemon is not found!'
                    })
                }

witheroux · Answer

What's happening is that every time you make a new search, you're adding a new event listener on the next button. You should be saving the value of id outside of the scope of your function and you should only add the event listener to the next button once.
Your code also seems to repeat itself a lot
Something like this would avoid repetition and stop you from adding extra listeners:
const ENDPOINT = 'https://pokeapi.co/api/v2/pokemon/';
let id = 1;

// Code where you define what next and search are ...

next.addEventListener('click', ()=>{
    fetchNewPokemon(id + 1);
});

function pokemonInfo(e) { 
    e.preventDefault();
    fetchNewPokemon(search.value);
}

Reading up on scope/closures might help you understand why it is that your code wasn't working the way you expected it to. MDN has a great write up about Closures and how nesting them impacts your code.

javascript async and await event listener: Pokemon

One Answer

Add your own answers!

Ask a Question