Not sure why this doesn't work. Codepen included

[Tsmithcode]

A Pen by Trenton (codepen.io)

So, this is my second attempt at doing a memory match game and I’m doing a much better job than my first attempt, however I came across an issue and I’m wondering why this isn’t working.

so, if you look at line 38 in my JS file you will see my render game function.

this is basically looping through the array and displaying the colors at random on the grid.

The problem is on line 46, the purpose of this line of code is to display a color (to imitate a front of the card) and then upon a click I will remove the class to show the actual card color. I understand JS runs from top to bottom and my thoughts were that because I put it on line 46 it would override line 45 but this is not the case. It DOES add the class as I’ve seen it in my dev tools but it does not add the color it’s supposed to. All of the cards keep their actual color.

Since JS reads from top to bottom, why wouldn’t this work?

[bbsmooth]

@Tsmithcode

It DOES add the class as I’ve seen it in my dev tools but it does not add the color it’s supposed to.

A property added directly to the element in the HTML will override a property added via a stylesheet unless you use !important in the style sheet. Look at the CSS rules in your dev tools for each card. You can see that the aquamarine color you are trying to add using the game-square-front class is being overridden by the color that was added to the card element in the HTML.

[Tsmithcode]

Just learned something new, I never knew about !important.

Thank you so much!