Debugging guidance for Pokemon Search App

Hello, I’m failing several of the tests however the behavior of my app is inline with the example. I’m new to debugging and could use some guidance on getting started. Can anyone point me in a good direction with this? Thank you.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pokémon Search App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Pokémon Search App</h1>
    <div class="input-container">
      <label>Search for Pokémon Name or ID</label>
      <input
        id="search-input"
        class="search-input" required
      />
      <button class="search-button" id="search-button">Search</button>
     </div>
     
    <div id="display-div"></div>

    <div id="base-div">
      
      <!-- Maybe don't use <p> to present these since we don't want them displayed? -->
      <p id="pokemon-name"></p>
      <p id="pokemon-id"></p>
      <p id="weight"></p>
      <p id="height"></p>
      <p id="types"></p>
      <p id="hp"></p>
      <p id="attack"></p>
      <p id="defense"></p>
      <p id="special-attack"></p>
      <p id="special-defense"></p>
      <p id="speed"></p>
    </div>


    <div id="stats-div">
    <output id="stats"> </output>
    </div>
    
    <script src="script.js"></script>
  </body>
</html>
const input = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
let name = document.getElementById('pokemon-name');
const id = document.getElementById('pokemon-id');
const weight = document.getElementById('weight');
const height = document.getElementById('height');
const typesElement = document.getElementById('types');
let hp = document.getElementById('hp');
let attack = document.getElementById('attack');
let defense = document.getElementById('defense');
let spAttack = document.getElementById('special-attack');
let spDefense = document.getElementById('special-defense');
let speed = document.getElementById('speed');
const displayDiv = document.getElementById('display-div');
const baseDiv = document.getElementById('base-div');
const statsDiv = document.getElementById('stats-div');

let pokeDataArr = [];

    hp.innerHTML = "HP: ";
    types.innerHTML = "";
    attack.innerHTML = "Attack: ";
    defense.innerHTML = "Defense: ";
    spAttack.innerHTML = "Special Attack: ";
    spDefense.innerHTML = "Special Defense: ";
    speed.innerHTML = "Speed: ";

const displayPokemon = (pokemon) => {

  
  
  let pokemonFound = false;

  pokemon.forEach(({ id, name, url }) => {
    if(input.value.toLowerCase() === name || parseInt(input.value) === id){
    pokemonFound = true;
    displayDiv.innerHTML = ""; 
    hp.innerHTML = "HP: ";
    types.innerHTML = "";
    attack.innerHTML = "Attack: ";
    defense.innerHTML = "Defense: ";
    spAttack.innerHTML = "Special Attack: ";
    spDefense.innerHTML = "Special Defense: ";
    speed.innerHTML = "Speed: ";

    
    fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${name}`).then((res) => res.json()).then((data) =>{
   displayDiv.innerHTML += `
    <div class="user-card">
      <h2 class="pokemon-name">${name.toUpperCase()} #${id}</h2> </div>`;
   const {type, stats} = data;
   const weight = data.weight;
   const height = data.height;
   const frontSprite = data.sprites.front_default;  
   const hpData = stats.find(stat => stat.stat.name === 'hp').base_stat
   
 
   const typeData = data.types.map((type) => {
    let typeEl = document.createElement("p");
    typeEl.textContent = type.type.name.toUpperCase();
    console.log(typeEl.textContent);
    return typeEl.textContent;
});

//  console.log('typeData', typeData);
  typesElement.innerHTML += typeData.join(" ");
 
   const attackData = stats.find(stat => stat.stat.name === 'attack').base_stat;
   const defenseData = stats.find(stat => stat.stat.name === 'defense').base_stat;
   const spAttackData = stats.find(stat => stat.stat.name === 'special-attack').base_stat;
   const spDefenseData = stats.find(stat => stat.stat.name === 'special-defense').base_stat;
   const speedData = stats.find(stat => stat.stat.name === 'speed').base_stat;
  
 displayDiv.innerHTML+= 
  `<p>Weight: ${weight}</p>
   <p>Height: ${height}</p>
   <img id="sprite" src="${frontSprite}"></img>`;
  hp.innerHTML += hpData;
  attack.innerHTML+= `${attackData}`;
  defense.innerHTML+= `${defenseData}`;
  spAttack.innerHTML+= `${spAttackData}`;
  spDefense.innerHTML+= `${spDefenseData}`;
  speed.innerHTML+= `${speedData}`;

// this made the values correct when I console log 
  // hp = `${hpData}`;
  // attack = `${attackData}`;
  // defense = `${defenseData}`;
  // spAttack = `${spAttackData}`;
  // spDefense = `${spDefenseData}`;
  // speed = `${speedData}`;

name = name.toUpperCase();
id = `#${id}`
// console.log("name",name);
// console.log("id",id);
// console.log("weight",weight);
// console.log("height",height);
// console.log("hp",hp);
// console.log("attack",attack);
// console.log("defense",defense);
// console.log("spAttack",spAttack);
// console.log("spDefense",spDefense);
// console.log("speed", speed);

  
// must also add type 
}).catch((err) => {
    console.error(`There was an error: ${err}`);
  });

    } 
  });
  if(!pokemonFound){
    alert("Pokemon not found.");
  }
};


// Making a GET request with fetch method
// The fetch() method returns a Promise, which is a placeholder object that will either be fulfilled if your request is successful, or rejected if your request is unsuccessful.
// If the Promise is fulfilled, it resolves to a Response object, and you can use the .then() method to access the Response.
// The data you get from a GET request is not usable at first. To make the data usable, you can use the .json() method on the Response object to parse it into JSON. 
// .catch helps to handle errors. 

searchBtn.addEventListener("click", () => {

//console.log(typeof input.value);

fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon').then((res) => res.json()).then((data) =>{
 
pokeDataArr = data.results
//console.log(typeof pokeDataArr[0].id);
// console.log(pokeDataArr);
displayPokemon(pokeDataArr);

}).catch((err) => {
    console.error(`There was an error: ${err}`);
  });



});





  

Hey, you can console.log Functions & Variables names etc to get some feedback. Also use the test console it will tell you what is being solved on a step by step basis. Keep in mind this is for FCC, ide’s like VScode have there own debugging console which is a lot different. Finallly those little red lines and the like are indications of errors in the code so use those to your advantage.