así que estoy tratando de generar aleatoriamente un Pokémon y luego cinco Pokémon más del mismo tipo para mostrar en una página web. Hasta ahora, esto es lo que tengo:
const pokemonName = document.querySelector(".pokemon-name"); const pokemonImage = document.querySelector(".pokemon-image"); function getPokemon() { const pokemonArr = [] const random = Math.floor(Math.random() * 256 + 1) axios.get("https://pokeapi.co/api/v2/pokemon/1" + random) .then(function (response) { pokemonName.innerHTML = response.data.forms[0].name; pokemonImage.src = response.data.sprites.front_default; pokemonArr.push(pokemonName.innerHTML) }) .catch(function (error) { pokemonName.innerHTML = "An error has occurred."; pokemonImage.src = ""; }); }Me las arreglé para mostrar un Pokémon, aunque todavía es meticuloso. Mi proceso de pensamiento fue agregar el nombre y la imagen a una matriz u objeto, pero tengo problemas para tratar de aplicar esa lógica. Esta es la primera vez que me presentan el concepto de API y uso Axios. ¿Sería capaz de usar un bucle? ¿Cómo hago para comparar los tipos de Pokémon en la API?
API de Pokémon: https://pokeapi.co/
https://replit.com/@heyitsmarcus/PokemonContainer#index.html
Arriba hay una demostración de la explicación del código a continuación.
Si desea llenar con X cantidad de Pokémon en su página, está en el camino correcto para usar clases. Sin embargo, debe utilizar la funcionalidad querySelectorAll para aprovechar sus clases. Esto te permitirá ejecutar un bucle for en las clases y elegir un Pokémon diferente para cada selector coincidente. Realmente desea tener una clase pokemon-container , por ejemplo, que albergue sus clases pokemon-name pokemon-image individualmente así:
<div class="pokemon-container"> <div class="pokemon-name"></div> <img class="pokemon-image" src=""> </div> <div class="pokemon-container"> <div class="pokemon-name"></div> <img class="pokemon-image" src=""> </div> <div class="pokemon-container"> <div class="pokemon-name"></div> <img class="pokemon-image" src=""> </div> Repita esto para la cantidad de pokemon que desea ver. Luego, puede ejecutar un ciclo for en las 3 clases pokemon-container para ver 3 pokemon aleatorios mientras sigue usando los mismos nombres que tenía antes. La diferencia es que solo desea ejecutar un querySelector para obtener los nombres e imágenes de Pokémon individuales específicos para ese contenedor. ¡Esto da como resultado 3 Pokémon aleatorios cada vez! =]
function getNewPokemon() { //this loop grabs every pokemon container individually const pokemonContainers = document.querySelectorAll('.pokemon-container'); for (const container of pokemonContainers) { //Grab this specific container's pokemon name element const pokemonName = container.querySelector('.pokemon-name'); //Grab this specific container's pokemon image element const pokemonImage = container.querySelector('.pokemon-image'); //Get your random integer const random = Math.floor(Math.random() * 256 + 1); //also I removed the 1 from after the final slash because you're excluding pokemon by including that 1 in the URL //and you can just use the natural JavaScript "fetch" //there's really no need for a whole library for a request like this axios.get(`https://pokeapi.co/api/v2/pokemon/${random}`) .then(json => { pokemonName.innerHTML = json.data.forms[0].name; pokemonImage.src = json.data.sprites.front_default; }) .catch(error => { console.error('error in request', error); pokemonName.innerHTML = "An error has occurred."; pokemonImage.src = ""; }) } }