如何根據您收到的數據更改班級的顏色？

Question

好的，所以我正在研究一個隨機神奇寶貝生成器，每次用戶單擊生成按鈕時，它都會選擇一個介於 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 class="card">
        <img class="card-image" src="${pokemon.image}"/>
        <h2 class="card-name"> ${pokemon.id}. ${pokemon.name}</h2>
        <p class="card-type">Type: ${pokemon.type}</p>

    </ul>
`
    )
    .join('');

pokemonGenerated.innerHTML = pokemonHTMLString;
};

fetchPokemon();

Answer 1

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 class="card pokemon-type type-${pokemon.typeCss}"> <img class="card-image" src="${pokemon.image}"/> <h2 class="card-name"> ${pokemon.id}. ${pokemon.name}</h2> <p class="card-type">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>