Cannot obtain Pikachu data - Build a Pokémon Search App

I get this from the console log when I try to get data from the API:

[TypeError: Cannot read properties of undefined (reading ‘json’)].

Also, the ‘name’ portion of this code is strikethrough and Im not sure why. The one after the $. const response = await fetch(https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${name-or-id}`)`

Is my code heading in the right direction

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/>
   <button id='search-button'/>
  
   <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");

searchButton.addEventListener('click', () => {red()});

searchButton.addEventListener('click', () => {pikachu()});

searchButton.addEventListener('click', () => {red()});


function red () { if (searchInput.value == 'Red') {alert('Pokémon not found')}};


fetchData();

async function 
   fetchData(){ 

  try{

const searchInput = document.querySelector('#search-input').value.toLowerCase

const data = await response.json();
console.log(data);
  
const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${name-or-id}`)

}



  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

Hi there. You don’t seem to be using your searchInput value. Plus toLowerCase is a method that needs to be called. Lastly you can’t use a variable until after you declare it.

Hope this helps. If you have any questions regarding what I said, please feel free to ask. :slight_smile:

You should not hardcode against specific user input!

To add onto what Jeremy said, once you are able to successfully call the API, you need to fetch the list of Pokemon from it. If the search input is not contained in the list, then you can safely believe that the user has not inputted the name of an actual Pokemon.

I still cant checkmark ’ When the #search-input element contains the value Pikachu and the #search-button element is clicked, the values in the #pokemon-name , #pokemon-id , #weight , #height , #hp , #attack , #defense , #special-attack , #special-defense , and #speed elements should be PIKACHU , #25 or 25 , Weight: 60 or 60 , Height: 4 or 4 , 35 , 55 , 40 , 50 , 50 , and 90 , respectively.’

const searchInput = document.querySelector('#search-input').value.toLowerCase();
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");

searchButton.addEventListener('click', () => {red()});

searchButton.addEventListener('click', () => {pikachu()});

searchButton.addEventListener('click', () => {red()});



fetchData();

async function 
   fetchData(){ 

  try{

searchInput;

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


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

}



  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}`
;
}

I removed the function red ()

the name part in this code is still strikethrough. I am not sure what that means


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

actually here is my updated javascript

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");

;

searchButton.addEventListener('click', () => {red()});

searchButton.addEventListener('click', () => {pikachu()});

searchButton.addEventListener('click', () => {red()});



fetchData();

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}`
;
}