Build-a-pokemon-search-app tests not completing :(

JavaScript
1

My code can’t complete the tests. It fails on 14, 16, 19. I’m lost.

14: When the #search-input element contains the value Red and the #search-button element is clicked, an alert should appear with the text “Pokémon not found”

When i input Red in to the search bar and press the button, i get the alert.

16: When the #search-input element contains the value Pikachu and the #search-button element is clicked, you should add an img element with the id of “sprite” and the src set to the Pokémon’s front_default sprite to the page.

When i enter Pikachu, i can see the image

19: When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of “sprite” and the src set to the Pokémon’s front_default sprite to the page.

Again i inputed 94 into the search bar and it displayed an image.

HTML:

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <input id="search-input" required>
    <button id="search-button">search</button>
    <main>
      <h4>Your pokemon</h4>
      <div id="images"></div>
      <p>name: <span id="pokemon-name"></span></p>
      <p>id: <span id="pokemon-id"></span></p>
      <p>weight: <span id="weight"></span></p>
      <p>height: <span id="height"></span></p>
      <p>types: <div id="types"></div></p>
      <p>hp: <span id="hp"></span></p>
      <p>attack: <span id="attack"></span></p>
      <p>defense: <span id="defense"></span></p>
      <p>special attack: <span id="special-attack"></span></p>
      <p>special defense: <span id="special-defense"></span></p>
      <p>speed: <span id="speed"></span></p>
    </main>
    <script src="script.js"></script>
  </body>
</html>

CSS:

p {
  margin: 0;
}

Javascript:

let ids = [];
let names = [];
let completedFetch = false;
const url = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";

async function fetchData() {
  try {
    const arr = (await (await fetch(url)).json()).results;

    ids = new Int32Array(arr.length);
    names = new Array(arr.length);

    arr.forEach((object, ind, array) => {
      ids[ind] = object.id;
      names[ind] = object.name;
    });

    completedFetch = true;
  } catch {
    console.log("error getting data");
  }
}
fetchData();

const pokName = document.getElementById("pokemon-name");
const id = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
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 img = document.getElementById("images");

const input = document.getElementById("search-input");
const btn = document.getElementById("search-button");

//main logic
const notFound = () => {
  alert("Pokémon not found");
}

async function fill(key) {
  try {
    const object = await (await fetch(url+"/"+key)).json();
    
    pokName.textContent = object.name.toUpperCase();
    id.textContent = object.id;
    weight.textContent = object.weight;
    height.textContent = object.height;
    
    object.types.forEach(el=>{
      types.innerHTML += `<p>${el.type.name.toUpperCase()}</p>`;
    })

    const stats = {};
    object.stats.forEach(el => {
      stats[el.stat.name] = el.base_stat;
    })
    hp.textContent = stats.hp;
    attack.textContent = stats.attack;
    defense.textContent = stats.defense;
    spAttack.textContent = stats['special-attack'];
    spDefense.textContent = stats['special-defense'];
    speed.textContent = stats.speed;

    img.innerHTML = `<img src="${object.sprites.front_default}" id="sprites">`;

  } catch {
    console.log("error filling data for pokemon");
  }
}

const findId = () => {
  const id = ids.find(id => id == input.value);
  if (id===undefined){
    notFound();
  } else {
    fill(id);
  }
}

const findName = () => {
  let arr = [...input.value].filter(char => /[a-zA-Z-]/.test(c => c == c)).map(char => { 
    if(!/A-Z/.test(char)) {
      return char.toLowerCase();
    } else {
      return char;
    }
  }).join("");

  if (names.find(e => e == arr)) { 
    fill(arr);
  } else {
    notFound();
  }
}

btn.addEventListener("click", () => {
  types.innerHTML = "";
  if (!completedFetch){
    for (let i = 0; i < 50000; i++) {}
    if (!completedFetch) {
      console.log("error, not yet gotten the data");
      return;
      }
  }

  if (/^[0-9]+$/.test(input.value)){
    findId();
  } else {
    findName();
  }
});
2

Hi @kurazmesanakura

Try placing the img element in the html page.

Happy coding

3

The id was sprites, not sprite like it was supposed to be. I also used createElement() in the process of finding the problem.
I also added a more robust waiting mechanism for waiting on the fetch by moving the function on the .addEventListener() to a seperate async function and using await with the refrence to the fetch function.
This fixed it.