Build a Pokémon Search App Project - Build a Pokémon Search App

[vaasumarothia45]

HELP MEEEEEEEEEEEEEEEEEEEEEEEE!!!
PLEASE I AM STUCK IN IT SINCE LIKE 3 HOURS
pls pls pls pls

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Build a Pokémon Search App Project - Build a Pokémon Search App

freeCodeCamp.org

[vaasumarothia45]

on clicking the button like with pikachu as input, its first showing the alert of pokemon not found as if it jumps directly into catch(err) without fetching, and then on clicking OK of alert… it then shows name id weight height and thats it nothing else.
here’s the js doc:

const button = document.getElementById("search-button");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
const spriteContainer = document.getElementById("sprite-container");

const getPokemon = async () => {
  try {
    const pokemonNameOrId = input.value.toLowerCase();
    const response = await fetch(
      `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokemonNameOrId}`
    );
    const data = await response.json();

    pokemonName.textContent = `${data.name.toUpperCase()}`;
    pokemonId.textContent = `#${data.id}`;
    weight.textContent = `Weight: ${data.weight}`;
    height.textContent = `Height: ${data.height}`;
    spriteContainer.innerHTML = `<img class="sprite" src="${data.sprites.front_default}" alt="${data.name}'s image">`;
    types.innerHTML = data.types
      .map(obj => `<span class="type ${obj.type.name}">${obj.type.name}</span>`)
      .join('');

    hp.textContent = data.stats[0].base_stat;
    attack.textContent = data.stats[1].base_stat;
    defense.textContent = data.stats[2].base_stat;
    specialAttack = data.stats[3].base_stat;
    specialDefense = data.stats[4].base_stat;
    speed = data.stats[5].base_stat;
  }catch(err){
    alert('Pokémon not found!');
  }
};

const reset = () => {
  const sprite = document.getElementById('sprite');
  if (sprite) sprite.remove();

  pokemonName.textContent = '';
  pokemonId.textContent = '';
  types.innerHTML = '';
  height.textContent = '';
  weight.textContent = '';
  hp.textContent = '';
  attack.textContent = '';
  defense.textContent = '';
  specialAttack.textContent = '';
  specialDefense.textContent = '';
  speed.textContent = '';
};

button.addEventListener("click", getPokemon);
input.addEventListener("keydown", e => {
  if(e.key === "Enter"){
    getPokemon();
  }
});

type or paste code here

[ILM]

please provide also your html, so that we can debug properly

[lasjorg]

Log out the error inside the catch, you should be able to see the issue.

---

Just in general, a try/catch isn’t super useful if you do not log out the error.