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>
).