Pokemon App (Can't pass img)

JavaScript
1

Hello everyone!

 <div id="sprite"></div>

const spriteBox = document.getElementById("sprite")

const fetchPokemon = async () => {
  try {
    const pokemonNameOrId = input.value.toLowerCase()
    const res = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameOrId}`);
    const data = await res.json();
    printPokemonData(data);
  } catch (err) {
    alert("Pokémon not found")
  }
};

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

  spriteBox.innerHTML = `<img src="${sprites.front_default}" id="sprite">`

}

search.addEventListener("click", elem => {
  elem.preventDefault()
  fetchPokemon()
});
........

I’m having a problem passing the two image tests while the pictures do appear in the preview and the code seems to be correct? Any ideas? Thanks in advance. I’ve cut out the irrelevant code to make it easier to read.

[Error: TypeError: sprite.src is undefined]
[Error: TypeError: sprite.src is undefined]

2

ids are meant to be unique.
If you already have a #sprite element in the code, then add another one with your printPokemonData method, you are confusing the test and writing invalid HTML.

Make the parent element of the sprite have a different id.

3

Ah yes ofc!

The details sometimes get lost on me in all the code :smiley:

1 Like