issue with card comparison

[ghost]

I'm working on the comparison part of concentration and a bit uncertain how to tackle it.

i want to compare the classes of two clicked cards, and if they are equal, return a match notification. if they are unequal, i want to return the cards to their initial states.

i think the first step is to store the click results in two variables, but have been spinning my wheels.

Have tried to chunk the process with pseudocode, but at a standstill.

// compare two clicked cards. if background-colors are equal, alert('nice, next move.')  if not equal, alert('try again.') and change both back to white
if ((class of firstCardClicked)==(class of secondCardClicked)){
  alert('Nice match!')
  // and 'deactivate' cards
} else {
  alert('Not a match. Try again.')
  // and add .card back to both cards.
  $('#grid').children(/*whatselector?*/).addClass('card')
}

[RobertAKARobin]

I'd do something like this:

var oldAnswerGlobal = null;
$(".card").on("click", function(){
  var answer = $(this).val();
  if(oldAnswerGlobal !== null){
    if(answer == oldAnswerGlobal){
      alert("Correct");
    }else{
      alert("Nope");
    }
    oldAnswerGlobal = null;
  }
});

[ghost]

I see the idea and worked it into my code. Expected the answer and oldAnswerNull vars to update with the two clicks and compare, but this is not happening. Grid is flipping cards, answer is not defined.

var oldAnswerGlobal = null

//card clickEvent
$('.card').on('click', flipCard)

function flipCard(evt){
  console.log('card clicked')
  $(this).toggleClass('card')
  var answer = $(this).val()
  if(oldAnswerGlobal !== null){
    if(answer == oldAnswerGlobal){
      alert("Nice match!")
    }else{
      alert("Not a match, try again.")
    }
    oldAnswerGlobal=null
  //add toggle from white to color for indiv cards
  $(this).toggleClass('card')
}
}

[RobertAKARobin]

Backtics, not commas!

.val() only works on <input /> elements. You probably want .text() or something.

[ghost]

wrong side of the keyboard!

i'm working my way through various selectors, and .attr('class') makes the most sense but does not define the variable.

var answer = $(this).attr('class')

[RobertAKARobin]

Is this what you expect it to be? Find out with console.log(this). Remember: this is always what had the event listener attached to it.

[ghost]

yes: it's returning, for example, <div class="blue"></div>, which is what i want to use to compare cards

[RobertAKARobin]

Instead of $(this).attr("class"), can you try this.className? See what that is.