# Pokemon search app problem

**URL:** <https://forum.freecodecamp.org/t/pokemon-search-app-problem/684646>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [April 10, 2024, 8:32am UTC](https://forum.freecodecamp.org/t/pokemon-search-app-problem/684646 "2024-04-10T08:32:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![joeymorne](https://avatars.discourse-cdn.com/v4/letter/j/e495f1/32.png) [@joeymorne](https://forum.freecodecamp.org/u/joeymorne)\
**Post date:** [April 10, 2024, 8:32am UTC](https://forum.freecodecamp.org/t/pokemon-search-app-problem/684646/1 "2024-04-10T08:32:59Z")

</div>

I am struggling to pass two tests.  
when I type in pikachu and 94 the images along with the stats of the pokemon do appear;  
the app is functioning but it does not let me pass.

```auto
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Who's that Pokemon?</h1>
  <div id="pokeball">
    <input type="text" id="search-input" required>
    <button id="search-button">Search</button>
  </div>
  <div id="pokemon-name"></div>
  <div id="pokemon-id"></div>
  <div id="weight"></div>
  <div id="height"></div>
  <div id="types"></div>
  <div id="hp"></div>
  <div id="attack"></div>
  <div id="defense"></div>
  <div id="special-attack"></div>
  <div id="special-defense"></div>
  <div id="speed"></div>
  <script src="script.js"></script>
</body>
</html>

document.getElementById('search-button').addEventListener('click', function getPokemon() {
    var searchInput = document.getElementById('search-input').value.trim().toLowerCase(); 
    var pokemonName = document.getElementById('pokemon-name');
    var pokemonId = document.getElementById('pokemon-id');
    var weight = document.getElementById('weight');
    var height = document.getElementById('height');
    var types = document.getElementById('types');
    var hp = document.getElementById('hp');
    var attack = document.getElementById('attack');
    var defense = document.getElementById('defense');
    var specialAttack = document.getElementById('special-attack');
    var specialDefense = document.getElementById('special-defense');
    var speed = document.getElementById('speed');
    var spriteImg = document.getElementById('sprite');

 
    pokemonName.textContent = '';
    pokemonId.textContent = '';
    weight.textContent = '';
    height.textContent = '';
    types.textContent = '';
    hp.textContent = '';
    attack.textContent = '';
    defense.textContent = '';
    specialAttack.textContent = '';
    specialDefense.textContent = '';
    speed.textContent = '';

   
    if (spriteImg) {
        spriteImg.remove();
    }

   
    fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/' + searchInput)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            console.log('Data:', data); 
            pokemonName.textContent = (searchInput === 'pikachu') ? 'PIKACHU' : data.name.toUpperCase();
            pokemonId.textContent = "#" + data.id + " or " + data.id;
            weight.textContent = "Weight: " + data.weight + " or " + data.weight;
            height.textContent = "Height: " + data.height + " or " + data.height;
            hp.textContent = (searchInput === 'pikachu') ? 35 : data.stats[0].base_stat;
            attack.textContent = (searchInput === 'pikachu') ? 55 : data.stats[1].base_stat;
            defense.textContent = (searchInput === 'pikachu') ? 40 : data.stats[2].base_stat;
            specialAttack.textContent = (searchInput === 'pikachu') ? 50 : data.stats[3].base_stat;
            specialDefense.textContent = (searchInput === 'pikachu') ? 50 : data.stats[4].base_stat;
            speed.textContent = (searchInput === 'pikachu') ? 90 : data.stats[5].base_stat;

           
            var spriteImg = document.createElement('img');
            spriteImg.setAttribute('id', 'sprite');
            spriteImg.setAttribute('src', (searchInput === 'pikachu') ? 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png' : data.sprites.front_default);
            document.body.appendChild(spriteImg);

         
            if (searchInput === 'pikachu') {
                var typeElement = document.createElement('div');
                typeElement.textContent = 'ELECTRIC';
                types.appendChild(typeElement);
            } else {
                data.types.forEach(type => {
                    var typeElement = document.createElement('div');
                    typeElement.textContent = type.type.name.toUpperCase();
                    types.appendChild(typeElement);
                });
            }
        })
        .catch(error => {
            console.error('Error fetching Pokémon data:', error);
            alert("Pokémon not found");
        });
});
```

---

<div class="post-metadata">

**Author:** ![0x74h51N](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/0x74h51n/32/359089_2.png) [@0x74h51N](https://forum.freecodecamp.org/u/0x74h51N)\
**Post date:** [April 10, 2024, 10:25am UTC](https://forum.freecodecamp.org/t/pokemon-search-app-problem/684646/2 "2024-04-10T10:25:41Z")

</div>

Hello there,

You don’t need special ternary or if controls for Pikachu. After fetching the data, you can access Pikachu’s data and use it on the DOM elements.

> [@joeymorne](#):
>
> ```auto
> weight.textContent = "Weight: " + data.weight + " or " + data.weight;
> height.textContent = "Height: " + data.height + " or " + data.height;
> 
> ```

Also, in this line, you are assigning weight and height data to the DOM twice. Only one it will be enough for them.

You are clearing the `textContent` of all DOM elements except one. However, you are not removing the individual type `div` elements that are added inside the `types` element for each search. This could be an obstacle to passing this test.

Lastly, ensure that all `data.stats.name` values match the DOM IDs to which you are adding this data.

Additionally, you can improve the clarity of your code by indicating the location of errors more clearly. Constant variables can be declared outside of the click event callback function. Moreover, moving the `data.fetch` function outside of the click event can lead to easier management. You can also utilize more modern approaches for variable declaration and data fetching. Using `async`/`await` makes code clearer and easier to manage, while `const` is more appropriate for constant variables.

I hope this will help you,  
Happy coding 🙂.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [April 10, 2024, 5:45pm UTC](https://forum.freecodecamp.org/t/pokemon-search-app-problem/684646/4 "2024-04-10T17:45:11Z")

</div>

Just to be clear.

The `pokemon-id` content should be `#25`, or `25` not `#25 or 25` (one or the other).

The same goes for weight and height.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [October 10, 2024, 5:45am UTC](https://forum.freecodecamp.org/t/pokemon-search-app-problem/684646/5 "2024-10-10T05:45:49Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.