JavaScript.style.backgroundColor未显示在正确的div中？

我正在尝试根据从API中提取的数据制作不同颜色的卡片。我让它工作，但有些事情需要改变以实现卡片翻转功能，现在颜色显示正确，但在卡片后面，而不是在实际的卡片上

以下是我获得颜色的方式：

const poke_container =
  document.getElementById('poke_container');
  const dex_id = 151;
  const colors = {
    grass: '#63BB5B',
    fire: '#FF9C54',
    water: '#4E90D5',
    etc...
  };
//Fetch card colors
  const main_types = Object.keys(colors);

然后在我的API数据拉取函数中：

//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;

然后是创建卡片的InnerHTML（仅用于正面）：

背景色（#eee）应该只是一个占位符，由card#u color变量覆盖。然而，我不得不拆分.pokemon和.pokemon>div来定位卡数据的背面，我认为这可能影响了一些事情，但我不确定

当我检查实际颜色正确的区域时，它会在HTML中被列为“element.style”

<div class="pokemon" style="background-color: rgb(99, 187, 91);">

我是否需要将我的pokemonEl更改为其他内容，或者是其他内容导致了问题

.pokemon {
  position: relative;
}

.pokemon>div {
  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 0.5s;
  -webkit-backface-visibility: hidden;
}

<div class="pokemon" style="background-color: rgb(99, 187, 91);">