javascript - 使用 API 数据在 Javascript 中翻转卡片

Question

使用 PokeAPI 我正在尝试让卡片显示数据，然后当您单击它们时，它们会翻转并显示一组不同的数据。

这是我的 JavaScript：

  const poke_container =
  document.getElementById('poke_container');
  const dex_id = 151;
  const colors = {
    grass: '#63BB5B',
    fire: '#FF9C54',
    water: '#4E90D5',
    electric: '#F3D23B',
    ice: '#74CEC0',
    poison: '#AB6AC8',
    ground: '#D97746',
    rock: '#C7B78B',
    bug: '#90C12C',
    dragon: '#0A6DC4',
    normal: '#f9199A1',
    flying: '#8FA8DD',
    fighting: '#D80A49',
    psychic: '#F97176',
    ghost: '#5269AC',
    dark: '#5A5366',
    steel: '#5A8EA1',
    fairy: '#EC8FE6',
  };
//Fetch card colors
  const main_types = Object.keys(colors);

//Get Pokemon from API
  const fetchPokemon = async () => {
    for (let i = 1; i<= dex_id; i++) {
      await getPokemon(i);
    }
  };

  const getPokemon = async id => {
    const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
    const res = await fetch(url);
    const pokemon = await res.json();
    createPokemonCard(pokemon);

  };

  fetchPokemon();

//Variables for Pokemon Card data from API
  function createPokemonCard(pokemon) {
    const pokemonEl = document.createElement('div');
    const pokemonElBack = document.createElement('div');
    pokemonEl.classList.add('pokemon');
    const poke_types = pokemon.types.map(el => el.type.name);
    const type = pokemon.types[0].type.name;
    //const stats = pokemon.stats[0].stat.name;
    const ability = pokemon.abilities[0].ability.name;
    const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
    const card_color = colors[type];

    pokemonEl.style.backgroundColor = card_color;

    //Card Front data and HTML
    const pokeInnerHTML = `
    <div class="img-container">
    <img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" />
    </div>
    <div class ="info">
      <span class="number">#${pokemon.id.toString().padStart(3, '0')}</span>
      <a href="https://bulbapedia.bulbagarden.net/wiki/${name}_(Pok%C3%A9mon)" class="name"><h3>${name}</h3></a>
      <small class="type"><span>${type.charAt(0).toUpperCase() + type.slice(1)}</span></small>
    </div>
    `;

    pokemonEl.innerHTML = pokeInnerHTML;

    poke_container.appendChild(pokemonEl);

// Back of the card data
  const pokeCardBack = `
    <div class="flipped">
      <div class="img-container">
      <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png" />
      </div>
      <div class ="info">
        <span class="number">#${pokemon.id.toString().padStart(3, '0')}</span>
        <h3 class="name">${name}</h3>
        <small class="type"><span>${ability}</span></small>
      </div>
    </div>
    `;

    pokemonElBack.innerHTML = pokeCardBack;

    //Flip card from front to back function
    const back = document.querySelectorAll('.pokemon');

    function flipCard() {
      this.classList.toggle('flipped');
    }
    back.forEach((card) => card.addEventListener("click", flipCard));


}});

这是与我的口袋妖怪数据相关的 CSS。

.poke_container {
  display: flex;
  flex-wrap: wrap;
  align-items: space-between;
  justify-content: center;
  margin: 0 auto;
  max-width: 1200px;
}

.pokemon {
  background-color: #eee;
  border-radius: 20px;
  box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
  margin: 10px;
  padding: 20px;
  text-align: center;
  transition: transform .3s;
      &:hover {
    transform: scale(1.2);
  }
}

.pokemon .img-container {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  text-align: center;
}

.pokemon .img-container img {
  margin-top: 20px;
  max-width: 90%;
}

.pokemon .info {
  margin-top: 20px;
}

.pokemon .number {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 0.8em;
  padding: 5px 10px;
  font-family: 'Josefin Sans', sans-serif;
}

.pokemon .name {
  margin: 15px 0 7px;
  letter-spacing: 1px;
  font-family: 'Cabin', sans-serif;
}


.pokemon .type {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  font-size: 0.8em;
  padding: 5px 10px;
  font-family: 'Josefin Sans', sans-serif;
}

.pokemon.flipped {
  transform: rotateY(180deg);
}

目前，当我点击卡片时，它只是翻转和反转文本，而不是显示 pokeCardBack 数据。此外，由于某种原因，它仅适用于其他所有卡。

如何让 FlipCard 函数显示来自 pokeCardBack 变量的 InnerHTML 数据？

标签： javascriptapiinnerhtml