I’m having problems with my front end in java. the names are correct , but the images do not match. it is not getting the pokemon data in the correct order.
let currentPageUrl = 'https://pokeapi.co/api/v2/pokémon/';
window.onload = async () => {
try {
await loadCharacters(currentPageUrl);
} catch (error) {
console.log(error);
alert('Erro ao carregar cards');
}
const nextButton = document.getElementById('next-button');
nextButton.addEventListener('click', loadNextPage);
const backButton = document.getElementById('back-button');
backButton.addEventListener('click', loadPreviousPage);
};
async function loadCharacters(url) {
const mainContent = document.getElementById('main-content');
mainContent.innerHTML = '';
try {
const response = await fetch(url);
const responseJson = await response.json();
responseJson.results.forEach((character) => {
const card = document.createElement("div");
card.style.backgroundImage = `url('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${character.url.replace(/D/g, "")}.png')`
card.className = "cards"
const characterNameBG = document.createElement("div")
characterNameBG.className = "character-name-bg"
const characterName = document.createElement("span")
characterName.className = "character-name"
characterName.innerText = `${character.name}`
characterNameBG.appendChild(characterName)
card.appendChild(characterNameBG)