Last project of javascript, case 16, case 17

JavaScript
1

why in case 16 and 17 it doesn’t work?

const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const heightPokemon = document.getElementById("height");
const weightPokemon = document.getElementById("weight");
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 sprite = document.getElementById("sprite");
const type = document.getElementById("types");

async function fetchData() {
    try {
        type.innerHTML ='';
        let insensitiveCase = searchInput.value.toLowerCase(); 
        const response = await fetch(
            `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${insensitiveCase}`
        );

        if (!response.ok) {
           alert("Pokémon not found");
        }

        const data = await response.json();
        const {name,id,height,weight,stats,sprites,types}= data;
        let front_default= sprites.front_default

        pokemonName.innerHTML =name.toUpperCase();
        pokemonId.innerHTML ="#" + id;
        heightPokemon.innerHTML = height;
        weightPokemon.innerHTML = weight;
        hp.innerHTML = stats[0].base_stat;
        attack.innerHTML = stats[1].base_stat;
        defense.innerHTML = stats[2].base_stat;
        specialAttack.innerHTML = stats[3].base_stat;
        specialDefense.innerHTML = stats[4].base_stat;
        speed.innerHTML = stats[5].base_stat;
        sprite.innerHTML = `<img id="sprite" src="${front_default}" />`;
        type.innerHTML = types[0].type.name.toUpperCase();
        console.log(data);
        
    } catch (error) {
        console.error("Error during the retrieval of data :", error);
    }
}


searchButton.addEventListener("click", ()=>{
   fetchData();
});
2

Welcome back to the forum @kakadhinio

So the forum can assist please post your HTML.

Happy coding

3

Hello here is my code html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h3 style="margin-bottom:15px;" >Search for Pokemon Name or ID:</h3>
        <input type="text" id="search-input" required/>
        <button id ="search-button">Search</button>
        <div id="credentials">
            <div id="pokemon-name">1</div>
            <div id="pokemon-id">2</div>
            <div id="weight">3</div>
            <div id="height">4</div>
        </div>
        <div id="sprite"></div>
        <div id="types"></div>
       <div class="stats">
           <div class="base-length">Base</div>
           <div class="stats-length">stats</div>
           <div class="value">hp</div>
           <div id="hp"></div>
           <div class="value">attack</div>
           <div id="attack"></div>
           <div class="value">defense</div>
           <div id="defense"></div>
           <div class="value">special-attack</div>
           <div id="special-attack"></div>
           <div class="value">special-defense</div>
           <div id="special-defense"></div>
           <div class="value">speed</div>
           <div id="speed"></div>
       </div>
        <script src="script.js"></script>
  </body>
</html>
4

when you ask for help it would be great if you could also post the project link

how many elements with id of #sprite do you have?

for 17, you are not adding the inner elements, notice the wording " the #types element should contain a single inner element with the value ELECTRIC ."

5

I assume that when talking the id, you talk the id of sprite contained in the api of pokemon

 sprite.innerHTML = `<img id="${id}" src="${front_default}" />`;

if it’s the case it always mark false

and for the case 17 I don’t understand, there is a single element in the type innerHTML which is types[0].type.name.toUpperCase()

6

I’m asking you to check how many elements you have with the id of #sprite
if you reuse the id on multiple elements you don’t get the results you want
check your html

what is marked false? the test? it happens if you keep having multiple elements with the same id

is that an html element, or text?

7

for the case 16 it marked false the test and I use id of pokemon api which is unique in function of the pokémon, for the case 17 it 's a html element , I changed innerHTML in innerText but it doesn’t always work

8

for test 16:, the test is looking for the #sprite element.
I was trying to make you notice this.

Test 17. You need a parent element with the required id, that then has inside an element for each type. You are adding only text inside your #types, not elements as requested.