Problem with Pokemon app tests

Hello,

the last two tests in the Pokemon Search App don’t work, because elements I am adding to my “types” div, do not appear.

Test 1:
When the #search-input element contains the value 94 and the #search-button element is clicked, the #types element should contain two inner elements with the text values GHOST and POISON, respectively. Make sure the #type element content is cleared between searches

Test 2:
When the #search-input element contains the value Pikachu and the #search-button element is clicked, the #types element should contain a single inner element with the value ELECTRIC. Make sure the #type element content is cleared between searches.

When I test it in the browser from my script.js and index.html it works fine.
When I input 94 in the search field I get this in the DOM:

<div id="types"><span>GHOST</span><span>POISON</span></div>

When I am running the tests from the internal editor the ones that check the elements like “GHOST” in types, naturally fail.

Why is this code working in my browser when I have my local index.html in the URL and why are these two tests failing when I do the tests in the online editor? Please help me, this is quite frustrating.

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 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 specialAttack = document.getElementById('special-attack');
const specialDefense = document.getElementById('special-defense');
const speed = document.getElementById('speed');


async function callApi(input) {
    const response = await fetch("https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/" + input);
    const pokemon = await response.json();
    return pokemon;
  }
  

function onClick () {
            //Clear existing img and h3
            let newDiv = document.getElementById("new")
            newDiv.innerHTML = '';
            let typesDiv = document.getElementById("types")
            typesDiv.innerHTML = '';

    let input = searchInput.value
    input = input.toLowerCase().replace(/[^a-zA-Z0-9\-]/g, "");
    if (input.includes('red')) {
        alert("Pokémon not found")
    } else
    callApi(input)
    .then(function(apiResult) {



        pokemonName.innerHTML = `${apiResult.name.toUpperCase()}`
        pokemonId.innerHTML = `#${apiResult.id}`
        weight.innerHTML = `Weight: ${apiResult.weight}`
        height.innerHTML = `Height: ${apiResult.height}`
        
        //Battle Data
        hp.innerHTML = `${apiResult.stats[0].base_stat}`
        attack.innerHTML = `${apiResult.stats[1].base_stat}`
        defense.innerHTML = `${apiResult.stats[2].base_stat}`
        specialAttack.innerHTML = `${apiResult.stats[3].base_stat}`
        specialDefense.innerHTML = `${apiResult.stats[4].base_stat}`
        speed.innerHTML = `${apiResult.stats[5].base_stat}`

        //Add img to dom
        let img = document.createElement("img");
        img.src = `${apiResult.sprites.front_default}`
        img.id = "sprite"
        newDiv = document.getElementById("new")
        newDiv.appendChild(img)

        //Add h3 to typesDiv. Can be just one at index 0, but can be more. Need loop to iterate through all.
        
        for (i = 0; i < apiResult.types.length; i++) {
            let typeTag = document.createElement("span")
            typeTag.innerHTML = apiResult.types[i].type.name.toUpperCase()
            typesDiv = document.getElementById("types")
            typesDiv.appendChild(typeTag);
        }
    })
}

searchButton.addEventListener("click", onClick)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="" />
</head>
<body>

<input id="search-input" required></input>
<button id="search-button">Search</button>

<div>
    <h2 id="pokemon-name"></h2>
    <h3 id="pokemon-id"></h2>
    <h3 id="weight"></h3>
    <h3 id="height"></h3>
    <div id="types"></div>
</div>

<table>
    <tbody><tr>
      <th>Base</th>
      <th>Stats</th>
    </tr>
    <tr>
      <td></td>
      <td id="hp"></td>
    </tr>
    <tr>
      <td></td>
      <td id="attack"></td>
    </tr>
    <tr>
      <td></td>
      <td id="defense"></td>
    </tr>
    <tr>
      <td></td>
      <td id="special-attack"></td>
    </tr>
    <tr>
      <td></td>
      <td id="special-defense"></td>
    </tr>
    <tr>
      <td></td>
      <td id="speed" class="speed"></td>
    </tr>
  </tbody></table>
  <div id="new"></div>
<script src="./script.js"> </script>
</body>

</html>
for (i = 0; i < apiResult.types.length; i++) {
            let typeTag = document.createElement("span")
            typeTag.innerHTML = apiResult.types[i].type.name.toUpperCase()
            typesDiv = document.getElementById("types")
            typesDiv.appendChild(typeTag);
        }

There’s i not declared here. Editor on page runs in a strict mode, which means all variables have to be declared with let or const (using var also would fulfill this requirement, but let’s pretend it doesn’t exist :stuck_out_tongue: ).

1 Like

Oh my favourite oversight in loop :grinning:
Thank you so much for the quick answer!

Unfortunately, the editor console doesn’t show that error, but the browser console does.

It is always worth taking a look in the browser console, even if the editor console is more convenient.