好的，所以我正在研究一個隨機神奇寶貝生成器，每次用戶單擊生成按鈕時，它都會選擇一個介于 1-905（National Dex 中神奇寶貝數量）之間的亂數。我能夠顯示生成的神奇寶貝的影像、名稱/ID 和型別。我堅持的是如何根據所述神奇寶貝的型別更改顯示神奇寶貝的容器/類的背景顏色。假設神奇寶貝的打字是草，我希望背景是綠色。我真的不知道從哪里開始，甚至這樣做。
我正在使用PokeApi
const pokemongenerated = document.getElementById('pokemongenerated');
const fetchPokemon = () => {
const array = [];
const randomID = Math.floor(Math.random() * 906) 1;
const url = `https://pokeapi.co/api/v2/pokemon/${randomID}`;
array.push(fetch(url).then((res) => res.json()));
Promise.all(array).then((results) => {
const pokemon = results.map((data) => ({
name: data.name,
image: data.sprites['front_default'],
type: data.types.map((type) => type.type.name).join(', '),
id: data.id,
}));
displayPokemon(pokemon);
});
};
const displayPokemon = (pokemon) => {
console.log(pokemon);
const pokemonHTMLString = pokemon
.map(
(pokemon) => `
<ul >
<img src="${pokemon.image}"/>
<h2 > ${pokemon.id}. ${pokemon.name}</h2>
<p >Type: ${pokemon.type}</p>
</ul>
`
)
.join('');
pokemonGenerated.innerHTML = pokemonHTMLString;
};
fetchPokemon();
uj5u.com熱心網友回復：
1.在物件上創建一個typeCss 2.為所有型別制作css樣式
const pokemongenerated = document.getElementById('pokemongenerated');
const fetchPokemon = () => {
const array = [];
const randomID = Math.floor(Math.random() * 906) 1;
const url = `https://pokeapi.co/api/v2/pokemon/${randomID}`;
array.push(fetch(url).then((res) => res.json()));
Promise.all(array).then((results) => {
const pokemon = results.map((data) => ({
name: data.name,
image: data.sprites['front_default'],
type: data.types.map((type) => type.type.name).join(', '),
typeCss: data.types.map((type)=>type.type.name).join('--'),
id: data.id,
}));
displayPokemon(pokemon);
});
};
const displayPokemon = (pokemon) => {
console.log(pokemon);
const pokemonHTMLString = pokemon
.map(
(pokemon) => `
<ul hljs-subst">${pokemon.typeCss}">
<img src="${pokemon.image}"/>
<h2 > ${pokemon.id}. ${pokemon.name}</h2>
<p >Type: ${pokemon.type}</p>
</ul>
`
)
.join('');
document.querySelector('#pokemonGenerated').innerHTML = pokemonHTMLString;
};
fetchPokemon();.pokemon-type[class*="water"]{
background:blue;
}
.pokemon-type[class*="grass"]{
background:green;
}
//so on<div id="pokemonGenerated"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/491690.html