How do I make cards in memory game flip back if they don't match or stay put if they do

[maureenv]

At the moment, I am able to store two clicked cards into an array on my memory game. I've created a compare function on line 68 that will compare the two cards that are clicked. If the value is the same, the console will log "It's a match", if not, the console will log "It's not a match". Now I want to change my compare function so that if the two cards match, they will remain facing forward, if not, they will turn back around.

The following is the code snippet I am referring to:

var compare=function(){
  if (clickedCard.length===2){
    if (clickedCard[0]===clickedCard[1]){

      console.log("It's a match");
    } else {
      //console.log("It's not a match");
      clickedCard.classList.remove("cardsFront");
    }
  }

I'm not sure how I can target the CSS of the two cards that are clicked, so that only those two cards remain facing forward or turn back around. I tried playing around with classList.remove and classList.add but couldn't solve the problem. There must be a better way to do this.

Thank you.

[maureenv]

I am referring to the entire code snippet in my question, not just the part that is in gray. I'm not sure why only part of it is highlighted in gray.

[maureenv]

Oh, also, here is the link to my repo http://maureenv.github.io/project1/

[RobertAKARobin]

When including multiple lines of code, remember to start and end them with a line of 3 backtics in a row by themselves!

Hm. classList.remove and classList.add definitely add and remove classes. Could you "inspect element" on those cards and try triggering the class change? You should be able to see the class changing like this:

[maureenv]

I think the problem is, I don't know how to target the CSS of just the array items that are clicked on.

var compare=function(){
  if (clickedCard.length===2){
    if (clickedCard[0]===clickedCard[1]){

      console.log("It's a match");
    } else {
      //console.log("It's not a match");
      clickedCard.classList.remove("cardsFront");
    }
  }

For example, in my current code I wrote clickedCard.classList.remvoe("cardFront"), and I keep getting an error that says "Cannot read property 'remove' of undefined" I've tried this with many other variables and functions and I keep getting an error. So I think I'm adding the classList.remove to the wrong item. I really don't know how to change the CSS of the value of clickedCard[0] and clickedCard[1] in my array.

[RobertAKARobin]

Sorry for the delay! Looking now.

[RobertAKARobin]

That's because clickedCard is an array. You define it at the start of your code:

clickedCard=[];

Arrays don't have classList. Only elements have classList. So you'll need to get a specific element out of classList, or loop through classList and do something for each element in it.