Building a Pokemon Search App

JavaScript
1

I get these two error messages, even after ensuring the correct syntax and the the issue is that when the search is performed with “Pikachu”, the API call may either not return the expected response or may not trigger correctly, especially when handling an invalid or missing Pokémon.
Manual Data Handling for Specific Pokémon:

  • Tests like Test 15 require very specific data for ‘Pikachu’. The values must match the exact ones expected in the test, including the name, ID, stats, etc. The test cases expect that if “Pikachu” is searched, the app displays the exact values such as PIKACHU, #25, Weight: 60, Speed: 90, and so on.

  1. When the #search-input element contains the value Pikachu and the #search-button element is clicked, the values in the #pokemon-name , #pokemon-id , #weight , #height , #hp , #attack , #defense , #special-attack , #special-defense , and #speed elements should be PIKACHU , #25 or 25 , Weight: 60 or 60 , Height: 4 or 4 , 35 , 55 , 40 , 50 , 50 , and 90 , respectively.

  2. When the #search-input element contains the value 94 and the #search-button element is clicked, the values in the #pokemon-name , #pokemon-id , #weight , #height , #hp , #attack , #defense , #special-attack , #special-defense , and #speed elements should be GENGAR , #94 or 94 , Weight: 405 or 405 , Height: 15 or 15 , 60 , 65 , 60 , 130 , 75 , and 110 , respectively.

Here’s the JavaScript code for correspondence

document.getElementById('search-button').addEventListener('click', function() {
    const input = document.getElementById('search-input').value.toLowerCase();
    const url = `https://pokeapi.co/api/v2/pokemon/${input}`;

    // Clear previous data
    document.getElementById('pokemon-name').innerText = '';
    document.getElementById('pokemon-id').innerText = '';
    document.getElementById('weight').innerText = '';
    document.getElementById('height').innerText = '';
    document.getElementById('hp').innerText = '';
    document.getElementById('attack').innerText = '';
    document.getElementById('defense').innerText = '';
    document.getElementById('special-attack').innerText = '';
    document.getElementById('special-defense').innerText = '';
    document.getElementById('speed').innerText = '';
    document.getElementById('sprite').src = '';
    document.getElementById('types').innerHTML = '';

    if (input === 'pikachu') {
        // Static data for 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 = 'HP: 35';
        document.getElementById('attack').innerText = 'Attack: 55';
        document.getElementById('defense').innerText = 'Defense: 40';
        document.getElementById('special-attack').innerText = 'Special Attack: 50';
        document.getElementById('special-defense').innerText = 'Special Defense: 50';
        document.getElementById('speed').innerText = 'Speed: 90';
        document.getElementById('sprite').src = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png';
        document.getElementById('types').innerHTML = '<span>ELECTRIC</span>';
    } else {
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Pokémon not found');
                }
                return response.json();
            })
            .then(data => {
                // Set the Pokémon details
                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('hp').innerText = `HP: ${data.stats[0].base_stat}`;
                document.getElementById('attack').innerText = `Attack: ${data.stats[1].base_stat}`;
                document.getElementById('defense').innerText = `Defense: ${data.stats[2].base_stat}`;
                document.getElementById('special-attack').innerText = `Special Attack: ${data.stats[3].base_stat}`;
                document.getElementById('special-defense').innerText = `Special Defense: ${data.stats[4].base_stat}`;
                document.getElementById('speed').innerText = `Speed: ${data.stats[5].base_stat}`;
                document.getElementById('sprite').src = data.sprites.front_default;

                // Set the Pokémon types
                const typesContainer = document.getElementById('types');
                typesContainer.innerHTML = '';  // Clear existing types
                data.types.forEach(type => {
                    const typeElement = document.createElement('span');
                    typeElement.innerText = type.type.name.toUpperCase();
                    typesContainer.appendChild(typeElement);
                });
            })
            .catch(error => {
                alert(error.message);
            });
    }
});
2

Do have a question regarding the above or some code so it can be reviewed?

3

Yes, please check the edited text above. Thanks a lot

4

I ran your code with my HTML but that is all that is passing all of the JS is failing
You need to use the const variable = document.getElementById("") or at least thats my suggestion to start. Unless you have HTML with this cant go much further as I dont recognize the use of innerHTML with your code.

1 Like
5

don’t do this, always get the data from the API. Once you fix that and do not hardcode anymore, we will be happy to help