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