Assigning DOM event to variable or array

Question

Building a card matching game, full code here https://codepen.io/3noki/pen/xjyErQ

I am trying to assign the event of turning a card over to a list/array, or a variable I guess, so I can check if it matches the next event of turning a second card over. But, this example, is resulting in errors, was placed this in the function openedCards().

let card1 =  $(event.target).toggleClass('open show');

If there is a better method for matching a value to a later value I haven't learned it yet, but this is what I currently know.

Also, I have implemented a counter, which should increment to a value of 1, then next event to a value of 2, and if they don't match, reset the both cards, I will be able to test it after this first part works, but that is listed in the function openedCards().

I think the biggest thing I am struggling with is specifying or saving the 1st and 2nd events from the DOM or figuring out how to reference this event as in an array[this event].

I've looked at some other examples like below but have been unsuccessful with trying those.

assign function

array of functions

Excerpt of the code

function cardFlip(event) { 
    $(event.target).toggleClass('open show') 
    openedCards();
} 

function openedCards(i) { 
    if (openedCardsList.length === 0) {
        openedCardsList.push(i); 
         let card1 = $(event.target).toggleClass('open show');
    } else if (openedCardsList.length === 1) { 
        openedCardsList.push(i); 
        let card2 = $(event.target).toggleClass('open show');
    } else {
        openedCardsList = []; 
        cardFlip(card1);  
        cardFlip(card2);
    }
}

It's very unclear what you're trying to ask. Please narrow down your question to one specific problem, and post the relevant code, what you expect to happen, and what's happening instead, in detail. I also have a feeling you're using the term "event" wrong; you can't "assign an event to a list". — Máté Safranka
– Máté Safranka, Commented May 16, 2018 at 14:45
How could I save the cardFlip() so I can check it against the second cardFlip()? function cardFlip(event) { $(event.target).toggleClass('open show') openedCards(); } function openedCards(i) { if (openedCardsList.length === 0) { openedCardsList.push(i); let card1 = $(event.target).toggleClass('open show'); } else if (openedCardsList.length === 1) { openedCardsList.push(i); let card2 = $(event.target).toggleClass('open show'); } else{ openedCardsList = []; cardFlip(card1); cardFlip(card2); } — 3noki
– 3noki, Commented May 16, 2018 at 14:48
Please edit your post to include the code, it's illegible in a comment. — Máté Safranka
– Máté Safranka, Commented May 16, 2018 at 14:58

Jonathan Rys · Accepted Answer · 2018-05-16 15:27:53Z

First off, openedCards accepts a single paramneter i. you are not passing any value to openedCards when calling it from cardFlip so you are pushing undefined to openedCardsList.

Second, you are calling $(event.target).toggleClass('open show'); in both cardFlip and openedCards. Since you are toggling, it would be better to only toggle when needed rather than toggle and then untoggle in certain cases.

Third, you are setting the values of card1 and card2 in separate blocks of your conditional so they will never be defined in your else block:

function openedCards(i) {
  if (openedCardsList.length === 0) {
    openedCardsList.push(i);
    let card1 =  $(event.target).toggleClass('open show');
  }
  else if (openedCardsList.length === 1) {
    openedCardsList.push(i);
    let card2 =  $(event.target).toggleClass('open show');
  }
  else{
    openedCardsList = [];
    // card1 and card2 are undefined here
    cardFlip(card1);
    cardFlip(card2);
  }
}

Lastly, myElem.toggle returns myElem not an event or a value so you should track the class of the card that's flipped and use that to compare since the class names of identical cards should always match.

I would get rid of the nested functions and use a single function to track the last card with:

let lastCard = null;

function cardFlip(event) {
  const thisCard = $(event.target);
  const cardClass = $(event.target).children("i").className;

  thisCard.toggleClass('open show')

  if (lastCard) {
    if (lastCard !== thisCard) {
        // The cards don't match
        cardFlip(lastCard);
        cardFlip(thisCard);
    } else {
      // you found a match!!!
      matchedCards++
    }
    lastCard = null;
  } else {
    // This is the first card flipped
    lastCard = cardClass;
  }
}

This is not what I ended up using, but this helped me understand a different way to look at this.

Collectives™ on Stack Overflow

Assigning DOM event to variable or array

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related