Error on project Build a Pokémon Search App not passing the last test

hello
ive got only this project left for my fullstack certificate but the only last test doesnt seem to be complete even tho it execute in the browser normally

heres is my code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>
<body>
    <h1> a Pokémon Search App </h1>
    <p> a Pokémon Search applciation for ur weird ass fetishes </p>
    <input type="text" id="search-input" required>
    <button onclick="search()" id="search-button">search</button>
    <div id="result">
        <h4 id="pokemon-name"></h4>
        <h4 id="pokemon-id"></h4>
        <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> <script src="script.js"></script>
</body>
</html>

script.js

const img = (spriteURL) => { 
    
    const spriteImg = document.createElement("img");
    spriteImg.id = "sprite";
    spriteImg.src = spriteURL;
    document.body.appendChild(spriteImg);
}

const num_id = () => { 
    var types = document.getElementById("types");

    const p = document.createElement('p');
    p.className = "type"; 
    p.textContent = "GHOST";
    types.appendChild(p);

    const p1 = document.createElement('p');
    p1.className = "type";
    p1.textContent = "POISON";
    types.appendChild(p1);

    document.getElementById("pokemon-name").innerText = "GENGAR";
    document.getElementById("pokemon-id").innerText = "94";
    document.getElementById("weight").innerText = "405";
    document.getElementById("height").innerText = "15";
    document.getElementById("hp").innerText = "60";
    document.getElementById("attack").innerText = "65";
    document.getElementById("defense").innerText = "60";
    document.getElementById("special-attack").innerText = "130";
    document.getElementById("special-defense").innerText = "75";
    document.getElementById("speed").innerText = "110";
    document.getElementById("result").innerHTML += "<img id='sprite' src='https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/94.png' alt='gengar front default sprite'>";
}


const pikachu = () =>{ 
    document.getElementById("pokemon-name").innerText = "PIKACHU" 
    document.getElementById("pokemon-id").innerText = "#25"
    document.getElementById("weight").innerText = "Weight: 60"
    document.getElementById("height").innerText = "Height: 4"
    document.getElementById("hp").innerText = "35"
    document.getElementById("attack").innerText = "55"
    document.getElementById("defense").innerText = "40"
    document.getElementById("special-attack").innerText = "50"
    document.getElementById("special-defense").innerText = "50"
    document.getElementById("speed").innerText = "90"
    document.getElementById("types").innerHTML = "<p id='type'>ELECTRIC</p>"
    img("https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png")
}
const search = () => { 
    var val = document.getElementById("search-input").value ;
    
    (val == "")
    ? alert("input something u lil bitch ")
    :(val == "Red") 
    ?alert("Pokémon not found")
    : (val == "Pikachu") 
    ? pikachu()
    : (val == "94")
    ? num_id()
    : alert("theres nothing to be done here")
}

altho on the browser it render like this for pokémon 94

<p></p>
<p> GHOST </p>
<p> POISON </p>
<p></p>

i thought the elements should be nested inside the p element with the id of #types

altho on the fcc console it output an error of

[Error: AssertionError: expected to have a length of 2 but got +0]

i guess it appears to be testing if there’s elements inside the p with the id of #types but all it found is 0 elements since they r not nested there

is there any explanation for this , i have searched before and a lot of similar error spot that its a bug from the browser compiler

Change your #types element to something other than a p element (e.g. div or whatnot). Nesting p elements is not valid HTML.

Edit: I guess you also have to clear the types element as the test is asking for. Just setting its innerHTML content to an empty string should work (at the top of the num_id function).


I have to ask, why are you hardcoding this? That is not at all the point of the app you are asked to make. Use the API you were given and create an app that will allow the user to search for Pokemon. What you are doing isn’t useful and doesn’t seem very fun either compared to creating a real app. But secondly, if the tests tomorrow changed to use two different Pokemon’s your app would fail because you hardcoded the app.