Pokemon Search App Test 17 and 20 Failing

I am not sure why the tests 17 and test 20 on Pokemon Search is failing on my code. The #types element is displaying and clearing as required for both single inner elements and two inner elements.

Here is my html and JS :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Pokémon Search</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <div class="container">
     <div class="input-container">
       <h1>Pokémon Search App</h1>
       <input type="text" id="search-input" placeholder="Search by name or ID" required>
       <button id="search-button">Search</button>
       </div>
       <div id="pokemon-info">
           <h2 id="pokemon-name"></h2>
           <h2 id="pokemon-id"></h2>
           <p id="weight">  </p>
           <p id="height">  </p>
           
           </div>
           <div class="image-section">
             <img id="sprite"
           </div>
           <p id="types"> </p>
           <div class="flex">
           <h4></h4>
            <div class="base">Base
           
           <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>
           </div>
           <div class="stats">Stats
           <p id="hp-element"></p>
           <p id="attack-element"></p>
           <p id="defense-element"></p>
           <p id="special-attack-element"></p>
           <p id="special-defense-element"></p>
           <p id="speed-element"></p>
           </div>
           
       
           </div>
   </div>
<script src="script.js"></script>
   
</body>
</html>
 document.getElementById("search-button").addEventListener("click",   function() {
  
  
 fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon')
.then(response => response.json())
.then(data => {
  const allPokemon = data.results;
 
let searchedTerm =document.getElementById("search-input").value;
 let searchTerm = searchedTerm.toLowerCase();
 
 let searchPokemon  =allPokemon.find(d => searchTerm==d.id || searchTerm==d.name)
 if (!searchPokemon) {
    alert("Pokémon not found");
} 
 
 let pokemonUrl = searchPokemon.url;
  
 

fetch(pokemonUrl)
.then(response => response.json())
.then(data => {
  const name = data.name;
  const id =data.id;
  const weight=data.weight;
  const height =data.height;
  document.getElementById("pokemon-name").innerText  = data.name.toUpperCase();
  document.getElementById("pokemon-id").innerText = `#${data.id}`;
  document.getElementById("weight").innerText =  `Weight: ${data.weight}`;
  document.getElementById("height").innerText = `Height: ${data.height}` ;
  document.getElementById("types").innerText =  data.types[0].type.name.toUpperCase();
  document.getElementById("sprite").src = data.sprites.front_default ;

if (data.types.length > 1) {
                      
                        const secondType = document.createElement('p');
                        secondType.innerText = data.types[1].type.name.toUpperCase();
                         
                        document.getElementById("types").appendChild(secondType);
                    }
   
  document.getElementById("hp").innerText = data.stats[0].base_stat;
  document.getElementById("attack").innerText = data.stats[1].base_stat;
   document.getElementById("defense").innerText = data.stats[2].base_stat;
   document.getElementById("special-attack").innerText = data.stats[3].base_stat;
   document.getElementById("special-defense").innerText = data.stats[4].base_stat;
   document.getElementById("speed").innerText = data.stats[5].base_stat;
  
  

})

})
    .catch(error => console.error('Error fetching data:', error));




});

If you look at the console after running the tests, you will see some feedback. Pay attention specifically to this bit

the #types element should contain a single inner element with the value ELECTRIC

I think the problem is that you have a text node, but it is not wrapped in an element

1 Like

Yes. I appended only the second type to the parent element when the requirement wanted both types to be under the type element. This solved the it. Thank you.