Pokemon Search app

Ive passed all but one test, and it’s functioning properly, but still fails for the if ‘search-input’ != valid alert “Pokémon not found”
below is my code.




async function fetchPokemonData(pokemon) {
  try {
    const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.toLowerCase()}`);
    if (!response.ok) throw new Error("Pokémon not found");
    const data = await response.json();

    // Update the elements with the fetched data
    document.getElementById('pokemon-name').textContent = data.name.toUpperCase();
    document.getElementById('pokemon-id').textContent = `#${data.id}`;
    document.getElementById('weight').textContent = `Weight: ${data.weight}`;
    document.getElementById('height').textContent = `Height: ${data.height}`;
    document.getElementById('hp').textContent = data.stats[0].base_stat;
    document.getElementById('attack').textContent = data.stats[1].base_stat;
    document.getElementById('defense').textContent = data.stats[2].base_stat;
    document.getElementById('special-attack').textContent = data.stats[3].base_stat;
    document.getElementById('special-defense').textContent = data.stats[4].base_stat;
    document.getElementById('speed').textContent = data.stats[5].base_stat;

    // Clear previous types and add new ones
    const typesElement = document.getElementById('types');
    typesElement.innerHTML = '';
    data.types.forEach(typeInfo => {
      const typeElement = document.createElement('div');
      typeElement.textContent = typeInfo.type.name.toUpperCase();
      typesElement.appendChild(typeElement);
    });

    // Add or update the sprite image
    let spriteElement = document.getElementById('sprite');
    if (!spriteElement) {
      spriteElement = document.createElement('img');
      spriteElement.id = 'sprite';
      document.body.appendChild(spriteElement);
    }
    spriteElement.src = data.sprites.front_default;

  } catch (error) {
    alert(error.message);
  }
}

// Event listener for the search button
document.getElementById('search-button').addEventListener('click', () => {
  const searchInput = document.getElementById('search-input').value;
  if (searchInput) {
    fetchPokemonData(searchInput);
     
      
    

  }
  
});```

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

Welcome back to the forum @MrTweatles

Without seeing the html…

When the #search-input element contains an invalid Pokemon name and the #search-button element is clicked, an alert should appear with the text "Pokémon not found" .

The search button click needs an alert.

Happy coding

@MrTweatles please do provide your HTML. That said…

So here’s some really weird behavior.

I went ahead and used my HTML since the elements should all basically be the same, and I can reproduce the problem you’re having. I see the alert when I try to enter “red” into the input, yet the test for it doesn’t pass.

Unless I start the tests and then immediately switch to a new tab in my browser, and give it about a minute for the tests to complete. When I return to the fCC project tab, all of the tests have passed. I’ve done this 4 times and it works each time. You can try this to see if it works for you.

@Teller there is an error in the console when the test fails: [Error: TypeError: Cannot read properties of undefined (reading 'trim')]. This seems to be referencing the alertMessage in the failing test case, which is not populating from an overridden function for window.alert. Oddly, if I copy the code for the project and for the test into local files, and open them in a separate window, alertMessage is populated as I’d expect and the test should pass. That plus what I explained with the new tab above. Should I open an issue for this? I can provide my HTML since it reproduces. Or we can wait for OP to respond with their full code. It’s really strange and I can’t figure out what’s going on.

hey there I reformatted my code to “attach” the alert to the button, its doing the same thing everything else passes and it does throw an alert when an invalid entry is made. the code is as follows:

 async function fetchPokemonData(pokemon) {
            const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemon.toLowerCase()}`);
            
            
            return await response.json();
        }

        document.getElementById('search-button').addEventListener('click', async () => {
            const searchInput = document.getElementById('search-input').value;
            if (searchInput) {
try{
  const data = await fetchPokemonData(searchInput);
    // Update the elements with the fetched data
    document.getElementById('pokemon-name').textContent = data.name.toUpperCase();
    document.getElementById('pokemon-id').textContent = `#${data.id}`;
    document.getElementById('weight').textContent = `Weight: ${data.weight}`;
    document.getElementById('height').textContent = `Height: ${data.height}`;
    document.getElementById('hp').textContent = data.stats[0].base_stat;
    document.getElementById('attack').textContent = data.stats[1].base_stat;
    document.getElementById('defense').textContent = data.stats[2].base_stat;
    document.getElementById('special-attack').textContent = data.stats[3].base_stat;
    document.getElementById('special-defense').textContent = data.stats[4].base_stat;
    document.getElementById('speed').textContent = data.stats[5].base_stat;

    // Clear previous types and add new ones
    const typesElement = document.getElementById('types');
    typesElement.innerHTML = '';
    data.types.forEach(typeInfo => {
      const typeElement = document.createElement('div');
      typeElement.textContent = typeInfo.type.name.toUpperCase();
      typesElement.appendChild(typeElement);
    });

    // Add or update the sprite image
    let spriteElement = document.getElementById('sprite');
    if (!spriteElement) {
      spriteElement = document.createElement('img');
      spriteElement.id = 'sprite';
      document.body.appendChild(spriteElement);
    }
    spriteElement.src = data.sprites.front_default;

  } catch (error) {
    alert("Pokémon not found");
  
        }
    }
});     

I got it, I did what spooky suggested and switched tabs, it passed. Hooray for me last year I couldn’t tell you how to write a for loop, if statement or anything for that matter. I’m super happy.

2 Likes