Mein Pokeapi bekommt einen Fetch -Fehler, aber warum? [geschlossen] ⇐ JavaScript

[Anonymous]

Ich habe dieses Pokemon -Such -Engin für freecodecamp.org erstellt und es hat die Tests bestanden, sodass ich nicht versuche, sie zu verbessern, aber ich kenne nicht alle Pokemon, also habe ich eine API namens Poke.API hinzugefügt.const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const pokemonInfo = document.getElementById('pokemon-info'); // Use this for appending elements
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');
const sprite = document.getElementById('sprite');

searchButton.addEventListener('click', async () => {
const searchTerm = searchInput.value.toLowerCase();
clearPokemonInfo(); // Clear previous data before searching

const loadingMessage = document.createElement('p');
loadingMessage.textContent = 'Loading...';
pokemonInfo.appendChild(loadingMessage);

try {
const response = await fetch(`https://pokeapi.co/api/v2/pokemon/${searchTerm}`);
if (!response.ok) {
throw new Error(`Pokémon not found (HTTP status: ${response.status})`);
}
const pokemonData = await response.json();
validatePokemonData(pokemonData, searchTerm);
await displayPokemonInfo(pokemonData); //Await the display
} catch (error) {
const errorMessage = document.createElement('p');
errorMessage.textContent = `Error: ${error.message}`;
errorMessage.style.color = 'red';
pokemonInfo.appendChild(errorMessage);
} finally {
pokemonInfo.removeChild(loadingMessage); //Remove loading message
}
});

async function displayPokemonInfo(pokemonData) {
pokemonName.textContent = pokemonData.name.toUpperCase();
pokemonId.textContent = pokemonData.id;
weight.textContent = pokemonData.weight;
height.textContent = pokemonData.height;
hp.textContent = pokemonData.stats.find(stat => stat.stat.name === 'hp').base_stat;
attack.textContent = pokemonData.stats.find(stat => stat.stat.name === 'attack').base_stat;
defense.textContent = pokemonData.stats.find(stat => stat.stat.name === 'defense').base_stat;
specialAttack.textContent = pokemonData.stats.find(stat => stat.stat.name === 'special-attack').base_stat;
specialDefense.textContent = pokemonData.stats.find(stat => stat.stat.name === 'special-defense').base_stat;
speed.textContent = pokemonData.stats.find(stat => stat.stat.name === 'speed').base_stat;
sprite.src = pokemonData.sprites.front_default;

//Improved type display
const typesElement = document.createElement('p');
typesElement.innerHTML = 'Types: ';
pokemonData.types.forEach(type => {
const typeIcon = document.createElement('img');
typeIcon.src = `type-icons/${type.type.name}.png`; //Requires type-icons folder with images
typeIcon.alt = type.type.name;
typeIcon.width = '20';
typeIcon.height = '20';
typesElement.appendChild(typeIcon);
typesElement.appendChild(document.createTextNode(type.type.name.toUpperCase() + ' '));
});
pokemonInfo.appendChild(typesElement);

// Fetch and display abilities - more robust handling of errors and multiple abilities
const abilities = await Promise.all(pokemonData.abilities.map(async ability => {
const response = await fetch(ability.url);
if (!response.ok) {
console.error(`Error fetching ability: ${ability.url}`, response.status);
return null; //Handle failed ability fetch gracefully
}
const abilityData = await response.json();
return abilityData.name; // Return just the name of the ability
}));
const abilitiesList = abilities.filter(a => a !== null).join(', '); //Filter out null values before joining.
const abilitiesElement = document.createElement('p');
abilitiesElement.innerHTML = `Abilities: ${abilitiesList}`;
pokemonInfo.appendChild(abilitiesElement);

}

function validatePokemonData(pokemonData, searchTerm) {
// Add your validation logic here based on the test cases. For example:
if (searchTerm === 'pikachu') {
// ... (Your Pikachu validation code) ...
} else if (searchTerm === '94') {
// ... (Your Gengar validation code) ...
}
//Add other validations as needed.
}

function clearPokemonInfo() {
while (pokemonInfo.firstChild) { //Completely clear the pokemonInfo div.
pokemonInfo.removeChild(pokemonInfo.firstChild);
}
}

< /code>
Ich habe versucht, auf der API selbst nach Pikachu zu suchen, und es funktioniert, so dass an meinem Ende trotzig etwas falsch ist.>