Cant populate Api data - Build a Pokémon Search App

I am stuck with the pikachu checkmark and the pokemon not found. I am unsure if I am on the right path. Any guidance?

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Pokemon App</title>
  </head>
  <body>
   <input id='search-input' required onClick='fetchData'/>
   <button id='search-button' onclick='fetchData()'/>
  <img id='sprite' src='' display='none'>
   <div id='pokemon-name'></div>
    <div id='pokemon-id'></div>
    <div id='weight'></div>
    <div id='height'></div>
    <div id='types'></div>
    <div id='height'></div>
    <div id='hp'></div>
    <div id='attack'></div>
    <div id='defense'></div>
    <div id='special-attack'></div>
    <div id='special-defense'></div>
    <div id='speed'></div>

    <script src="./script.js"></script>
  </body>
</html>
/* file: styles.css */

/* file: script.js */
const searchInput = document.querySelector('#search-input');
const searchButton = document.querySelector("#search-button");
const weight = document.querySelector("#weight");
const height = document.querySelector("#height");
const types = document.querySelector("#types");
const hp = document.querySelector("#hp");
const attack = document.querySelector("#attack");
const defense = document.querySelector("#defense");
const spAtk = document.querySelector("#special-attack");
const spDef = document.querySelector("#special-defense");
const speed = document.querySelector("#speed");
const pokemonName = document.querySelector("#pokemon-name");
const pokemonId = document.querySelector("#pokemon-id");

;



async function 
   fetchData(){ 

  try{

const pokemonName = searchInput.value.toLowerCase();



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


const img = document.getElementById('sprite');
img.src = pokemonSprite
img.style.display = 'block'
;
  
 
  
const data = await response.json();
console.log(data);
 const pokemonSprite = `${data.front_default}`

}



  catch(error){console.log(error)}
   ;




hp.innerContent == `${data.hp}`;

attack.textContent == `${data.attack}`;
hp.textContent == `${data.hp}`
defense.textContent == `${data.defense}`
spAtk.textContent == `${data.spAtk}`
spDef.textContent == `${data.spDef}`
height.textContent == `${data.height}`
weight.textContent == `${data.weight}`
speed.textContent == `${data.speed}`
hp.textContent == `${data.hp}`
;
}

Your browser information:

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

Challenge Information:

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

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

1 Like

updated javascript. but no progress

const searchInput = document.querySelector('#search-input');
const searchButton = document.querySelector("#search-button");
const weight = document.querySelector("#weight");
const height = document.querySelector("#height");
const types = document.querySelector("#types");
const hp = document.querySelector("#hp");
const attack = document.querySelector("#attack");
const defense = document.querySelector("#defense");
const spAtk = document.querySelector("#special-attack");
const spDef = document.querySelector("#special-defense");
const speed = document.querySelector("#speed");
const pokemonName = document.querySelector("#pokemon-name");
const pokemonId = document.querySelector("#pokemon-id");

;



async function 
   fetchData(){ 

  try{

const pokemonName = searchInput.value.toLowerCase();



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




 
  
const data = await response.json();
console.log(data);
 

}



  catch(error){console.log(error)}
   ;


pokemonName.textContent = `${data.name.toUpperCase()}`;
    pokemonID.textContent = `${data.id}`;
   
attack.textContent == `${data.attack}`;
defense.textContent == `${data.defense}`;
spAtk.textContent == `${data.spAtk}`;
spDef.textContent == `${data.spDef}`;
height.textContent == `${data.height}`;
weight.textContent == `${data.weight}`;
speed.textContent == `${data.speed}`;
hp.textContent == `${data.hp}`;

};

The data variable is scoped to the try block. You do not have access to it outside that code block.

That const data will only be available within the try{}. Therefore, it will not work in all these attempts to get to it.