Pokemon search app

JavaScript
1

hey guys for some odd reason when i press enter all the data gets displayed but not the sprite image and the types i dont know wherer i went wrong can somebody help me please? code is below


const searchInput = document.getElementById("search-input");

const searchButton = document.getElementById("search-button");

const pokemonName = document.getElementById("pokemon-name");

const pokemonId = document.getElementById("pokemon-id");

const pokemonWeight = document.getElementById("weight");

const pokemonHeight = document.getElementById("height");

const pokemonTypes = document.getElementById("types");

const hp = document.getElementById("hp");

const attack = document.getElementById("attack");

const defense = document.getElementById("defense");

const pokemonSpAtt = document.getElementById("special-attack");

const pokemonSpDef = document.getElementById("special-defense");

const pokemonSpeed = document.getElementById("speed");

const sprites = document.getElementById("sprite-container");

const getPokemon = async () => {

try {

const pokemonNameorid = searchInput.value.toLowerCase();

const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameorid}`);

const data = await res.json();

getPokemonInfo(data);

} catch (err) {

alert("Pokémon not found");

console.log(err);

}

};

const getPokemonInfo = data => {

const {name , id , weight, height, types , sprites , stats} = data;

pokemonName.textContent = `${name[0].toUpperCase() + name.slice(1)}`

pokemonId.textContent = `#${id}`

pokemonWeight.textContent = ` weight: ${weight}`

pokemonHeight.textContent = ` height ${height}`

sprites.innerHTML = `<img src='${sprites.front_default}' alt='${name}' />`

hp.textContent = stats[0].base_stat;

attack.textContent = stats[1].base_stat;

defense.textContent = stats[2].base_stat;

pokemonSpAtt.textContent = stats[3].base_stat;

pokemonSpDef.textContent = stats[4].base_stat;

pokemonSpeed.textContent = stats[5].base_stat;

pokemonTypes.innerHTML = types.map(obj => {

`<span>${obj.type.name[0].toUpperCase() + obj.type.name.slice(1)}</span>`;

})

};

searchButton.addEventListener("click", e => {

e.preventDefault;

getPokemon();

});
2

Please post your HTML as well when asking for help.

Inside getPokemonInfo the variable sprites is the data you got from the destructuring assignment, not the element you got using getElementById.

You essentially have variable name conflicts. Name the element variable something else.

3

ok, when i change the name of const sprites = getElementById(“sprites-container”) to lets say sprite then all of a sudden it throws error and it only dispkay name id weight and height but wfen i chabge it back to “sprites” all the data gets displayed only the image that doesnt get displayed how can i fix that?

4

Did you update the place where you use the element to use the new variable name? You can’t just update the variable name.

5

yes i updated both what do you suggest i do ? should i create another aysnc function that only fetches the sprite image? i first thought it was the edge browser that i was using then i switched to chrome but same thing happens

6

Post your updated code with the HTML.

You don’t have to do anything other than update the variable name, that’s it. That is, if you actually have an element in the HTML with the sprite-container id.