Unable to get img of pokemon, name search (works for some)

const searchBtn = document.getElementById("search-button")
const searchInput = document.getElementById("search-input")
const pokemonName = document.getElementById("pokemon-name")
const pokemonId = document.getElementById("pokemon-id")
const weight = document.getElementById("weight")
const height = document.getElementById("height")
const sprite = document.getElementById('sprite-div');
const types = document.getElementById("types")
const hp = document.getElementById("hp")
const attack = document.getElementById("attack")
const defense = document.getElementById("defense")
const spAttack = document.getElementById("special-attack")
const spDefense = document.getElementById("special-defense")
const speed = document.getElementById("speed")
const pokeApiProxy = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon"


/*searchBtn.addEventListener("click", () => {
  if(searchInput.value === "Red") {
    alert("Pokémon not found");
  }})*/
const search = () => { 
  try {
  fetch(pokeApiProxy)
    .then((res) => res.json())
    .then((data) => {
      const apiResults = data.results; // Store the results
      let found = false; // Flag to track if a match is found
      apiResults.forEach((pokemon) => {
        if (searchInput.value == pokemon.id || searchInput.value.toLowerCase() == pokemon.name)  {
          found = true; // Set the flag to true if a match is found
          console.log(pokemon.url)
          fetch(pokemon.url).then((res) => res.json()).then((data) => {
            pokemonName.textContent = data.name.toUpperCase();
            pokemonId.textContent = `#${data.id}`;
            weight.textContent = `Weight: ${data.weight}`;
            height.textContent = `Height: ${data.height}`;

            hp.textContent = data.stats[0].base_stat;
            attack.textContent = data.stats[1].base_stat;
            defense.textContent = data.stats[2].base_stat;
            spAttack.textContent = data.stats[3].base_stat;
            spDefense.textContent = data.stats[4].base_stat;
            speed.textContent = data.stats[5].base_stat;
            types.textContent = `${data.types[0].type.name.toUpperCase()}` + ` ${data.types[1].type.name.toUpperCase()}`
            sprite.innerHTML = `<img id="sprite" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${data.id}.png" />`;
            console.log(data)
             types.innerHTML = '';
          })
          }
      });
      if (!found) {
          alert("Pokémon not found")
        } 
    });
  } 
  catch (err) {
    console.log(err)
  }
}

searchBtn.addEventListener("click", search)

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

Lastly without your HTML I genuinely have no idea where you went wrong. Everything suggests it would be functional. Though you really should use the Pokeapi for the front sprite and you only really need to make the one API call. But it wouldn’t affect the end result.

Hi there!

You are fetching all pokemon data and then looping through thousands of pokies with forEach. If a match is found, you set a flag to true and then fetch that specific pokemon’s data again. This means you are making multiple API calls and handling everything inside an asynchronous function, which is inefficient.

Instead, you should fetch only the specific pokemon data based on the user’s input. This will reduce the number of API calls and improve performance. You can use the specific pokemon’s image source from the fetched data.

Also, explain how your code works, what issues you encountered, and how you tried to solve them. Did you find the origin of the issue? This will help you understand what I am saying and how you can solve it. Additionally, it will help others to understand your issue better.

For better explanation and debugging, as Anna mentioned, you should share your HTML code as well. However, the explanation and related challenge are mandatory first!

Hi there,
Thanks for reaching out but I managed to solve the issue I tested the code on VS Code and the error I got was coming from the line types.textContent, I didn’t realise that the pokemons had 1 or 2 types. So I rewrote the code for it and managed to pass the tests (and some others). I think from now on I’ll start using VS Code to fix my code for future projects.

1 Like