Confused about .style.backgroundColor for the correct class

Using an API, the background color for cards are supposed to be different based on data pulled. However it’s not assigning it to the right div or class and I am not sure how to fix it.

The colors on are actually behind the card and not on the card. I had it working originally, but I had to add more divs and classes to get the card flip function working and now I’m not sure how to fix it.

Here’s how I get the colors:

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

My function which pulls the API data:

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 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;
    pokemonElBack.style.backgroundColor = card_color;

And the innerHTML that creates the card (here’s just the front):

const pokemonFrontEl = document.createElement('div');
  pokemonFrontEl.classList.add('front');
  pokemonFrontEl.innerHTML = `
    <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.appendChild(pokemonFrontEl);
poke_container.appendChild(pokemonEl);

Though I think the CSS is the culprit. I was suggested to split the .pokemon for the card back positioning so now I have it like this:

.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;
}

The #eee is the current gray color of the cards that is supposed to be overwritten by the card_color variable.

When I inspect it locally, the correct color is in the element.style section and I can see this HTML:

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

Is the issue with my pokemonEl variable, my CSS, or what I am calling card_color on?

Here is a working CodePen

The fact that you see the styles applied in the DOM suggests that it’s an issue with how your divs are layered and their styles, but this is really difficult to debug without the whole code. Do you have a codepen or similar with a working example?

Here is my CodePen with the working code:

I am styling the background on my PokemonEl variable. I think I need to call it on the Pokemon div instead, but when I use GetElementById for that div I am getting a null error.

You have set the background color to #eee in the .pokemon > div selector. I’m not really sure if you want the color on only the front/back elements or both the pokemon and front/back elements?

If you want it on both you can set the background-color to inherit in the .pokemon > div selector. If you only want it on the front/back elements you have to move the code that is setting the colors so it is applied to those elements instead.

Ok I fixed it based on your advice… I tried changing it to background-color: inherit but it just made the card transparent. The background color was correct but it was in a different div and made it rectangular.

I took out pokemonEl.style.backgroundColor = card_color; in my function and applied pokemonFrontEl.style.backgroundColor = card_color to my front card variable and pokemonBackEl.style.backgroundColor = card_color; to my back card variable. Maybe there is a cleaner way, but this works. Thanks for your help!