小贝子编程

JavaScript Pokémon API。试图弄清楚如何为神奇宝贝 API 显示 153 到 251 之间的数字



我正在尝试仅显示第2代口袋妖怪的API口袋妖怪数据(编号153至251(。我通过youtube教程进行了自我思考，所以我对JS数学了解不多，如果我的术语不正确，很抱歉。

我正试图得到"；const pokemons_number_johtoDex="；20〃"数字基本上说是表演"；153至251〃；。如有任何帮助，我们将不胜感激，谢谢

const poke_container_johtoDex = document.getElementById('poke_containerjohtoDex');
const pokemons_number_johtoDex = 2;
const colors_johtoDex = {
fire: '#FDDFDF',
grass: '#DEFDE0',
electric: '#FCF7DE',
water: '#DEF3FD',
ground: '#f4e7da',
rock: '#d5d5d4',
fairy: '#fceaff',
poison: '#F0D3FF',
bug: '#f8d5a3',
dragon: '#97b3e6',
psychic: '#eaeda1',
flying: '#F5F5F5',
fighting: '#E6E0D4',
normal: '#F5F5F5',
};
const main_types_johtoDex = Object.keys(colors_johtoDex);
const fetchPokemons_johtoDex = async () => {
for (let i = 1; i <= pokemons_number_johtoDex; i++) {
await getPokemon_johtoDex(i);
}
};
const getPokemon_johtoDex = async id => {
const url = `https://pokeapi.co/api/v2/pokemon/${id}/`;
const res = await fetch(url);
const pokemon_johtoDex = await res.json();
createPokemonCard_2(pokemon_johtoDex);
};

function createPokemonCard_2(pokemon_johtoDex) {
const pokemonEl_johtoDex = document.createElement('div');
pokemonEl_johtoDex.classList.add('pokemon_2');
const poke_types_johtoDex = pokemon_johtoDex.types.map(type_johtoDex => type_johtoDex.type.name);
const type = main_types_johtoDex.find(type_johtoDex => poke_types_johtoDex.indexOf(type_johtoDex) > -1);
const color_johtoDex = colors_johtoDex[type];
pokemonEl_johtoDex.style.backgroundColor = color_johtoDex;
const pokeInnerHTML_johtoDex = `
<div class="pokeModelContainer container" data-toggle="modal" data-target="#exampleModal${pokemon_johtoDex.id}">
<div class="pokeiconimage">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-vii/icons/${pokemon_johtoDex.id}.png" alt="${name}" />
</div>
<div class="pokecardbody">
<p>No:${pokemon_johtoDex.id} ${name}</p>
</div>
</div>
<div class="modal fade" id="exampleModal${pokemon_johtoDex.id}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="pokemonModalContainer">
<div class="pokemonModalContainerRow">
<div class="pokemonModelImageDiv col">
<img class="pokemonModelImage" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/${pokemon_johtoDex.id}.png" alt="${name}"/>
</div>
<div class="pokeModeltext col">
<div class="pokemonModelPokemonName">
<h1>${name}</h1>
</div>
<div class="poke-text-block">
<p class="p">Ability: ${pokemon_johtoDex.abilities[0].ability.name}</p>
</div>
<div class="poke-text-block">
<p>
HP: ${pokemon_johtoDex.stats[0].base_stat}<br><br>
Attack: ${pokemon_johtoDex.stats[1].base_stat}<br><br>
Defense: ${pokemon_johtoDex.stats[2].base_stat}<br><br>
Special-Attack: ${pokemon_johtoDex.stats[3].base_stat}<br><br>
Special-Defense: ${pokemon_johtoDex.stats[4].base_stat}<br><br>
Speed: ${pokemon_johtoDex.stats[5].base_stat}</p>
</div>
</div>
<div class="backButton">
<p class="p1">back</p>
</div>
</div>
</div>
</div>
</div>
</div> `;
pokemonEl_johtoDex.innerHTML = pokeInnerHTML_johtoDex;
poke_container_johtoDex.appendChild(pokemonEl_johtoDex);
}

fetchPokemons_johtoDex();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
</style>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="styles.css" />
<title>Pokemon API</title>
</head>
<body>
<main>
<div class="kanto">
<p>pokemon display kanto</p>
<div id="poke_containerjohtoDex" class="poke-container_johtoDex row" style="display: flex; justify-content: center; "></div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="js.js"></script>
</main>
</body>

如果我说得对，你可以设置的开始和结束ID

const start_pokemons_number_johtoDex = 153;
const end_pokemons_number_johtoDex = 251;

从开始到结束的变化定义在这些常量中：

for (let i = start_pokemons_number_johtoDex; i <= end_pokemons_number_johtoDex; i++)

这是完整的代码：

const poke_container_johtoDex = document.getElementById('poke_containerjohtoDex');
const start_pokemons_number_johtoDex = 153;
const end_pokemons_number_johtoDex = 251;
const colors_johtoDex = {
fire: '#FDDFDF',
grass: '#DEFDE0',
electric: '#FCF7DE',
water: '#DEF3FD',
ground: '#f4e7da',
rock: '#d5d5d4',
fairy: '#fceaff',
poison: '#F0D3FF',
bug: '#f8d5a3',
dragon: '#97b3e6',
psychic: '#eaeda1',
flying: '#F5F5F5',
fighting: '#E6E0D4',
normal: '#F5F5F5',
};
const main_types_johtoDex = Object.keys(colors_johtoDex);
const fetchPokemons_johtoDex = async () => {
for (let i = start_pokemons_number_johtoDex; i <= end_pokemons_number_johtoDex; i++) {
await getPokemon_johtoDex(i);
}
};
const getPokemon_johtoDex = async id => {
const url = `https://pokeapi.co/api/v2/pokemon/${id}/`;
const res = await fetch(url);
const pokemon_johtoDex = await res.json();
createPokemonCard_2(pokemon_johtoDex);
};

function createPokemonCard_2(pokemon_johtoDex) {
const pokemonEl_johtoDex = document.createElement('div');
pokemonEl_johtoDex.classList.add('pokemon_2');
const poke_types_johtoDex = pokemon_johtoDex.types.map(type_johtoDex => type_johtoDex.type.name);
const type = main_types_johtoDex.find(type_johtoDex => poke_types_johtoDex.indexOf(type_johtoDex) > -1);
const color_johtoDex = colors_johtoDex[type];
pokemonEl_johtoDex.style.backgroundColor = color_johtoDex;
const pokeInnerHTML_johtoDex = `
<div class="pokeModelContainer container" data-toggle="modal" data-target="#exampleModal${pokemon_johtoDex.id}">
<div class="pokeiconimage">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-vii/icons/${pokemon_johtoDex.id}.png" alt="${name}" />
</div>
<div class="pokecardbody">
<p>No:${pokemon_johtoDex.id} ${name}</p>
</div>
</div>
<div class="modal fade" id="exampleModal${pokemon_johtoDex.id}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="pokemonModalContainer">
<div class="pokemonModalContainerRow">
<div class="pokemonModelImageDiv col">
<img class="pokemonModelImage" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/${pokemon_johtoDex.id}.png" alt="${name}"/>
</div>
<div class="pokeModeltext col">
<div class="pokemonModelPokemonName">
<h1>${name}</h1>
</div>
<div class="poke-text-block">
<p class="p">Ability: ${pokemon_johtoDex.abilities[0].ability.name}</p>
</div>
<div class="poke-text-block">
<p>
HP: ${pokemon_johtoDex.stats[0].base_stat}<br><br>
Attack: ${pokemon_johtoDex.stats[1].base_stat}<br><br>
Defense: ${pokemon_johtoDex.stats[2].base_stat}<br><br>
Special-Attack: ${pokemon_johtoDex.stats[3].base_stat}<br><br>
Special-Defense: ${pokemon_johtoDex.stats[4].base_stat}<br><br>
Speed: ${pokemon_johtoDex.stats[5].base_stat}</p>
</div>
</div>
<div class="backButton">
<p class="p1">back</p>
</div>
</div>
</div>
</div>
</div>
</div> `;
pokemonEl_johtoDex.innerHTML = pokeInnerHTML_johtoDex;
poke_container_johtoDex.appendChild(pokemonEl_johtoDex);
}

fetchPokemons_johtoDex();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
</style>
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="styles.css" />
<title>Pokemon API</title>
</head>
<body>
<main>
<div class="kanto">
<p>pokemon display kanto</p>
<div id="poke_containerjohtoDex" class="poke-container_johtoDex row" style="display: flex; justify-content: center; "></div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="js.js"></script>
</main>
</body>

我不知道是否有更好的方法让这个API在一个调用中获得一组ID，你可以在将来研究。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium