[SOLVED] Click event only works once in querySelectorAll

Click event only works once in querySelectorAll - javascript

I am currently trying to make a board game in the style of memory (I am self taught, and things like that help me great in understanding javascript). My question is probably basic stuff, but I am new to all of this so I appreciate any help.

My problem is that I have two cards with the same class, and with my code, when I click on first or second one, it only works on the first card.

document.querySelectorAll(".first-card").forEach(container => {
  container.addEventListener('click', flipCard)
})

function flipCard() {
  document.querySelector(".first-card").classList.toggle("flip")

}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 100px;
  display: flex;
}

.first-card,
.second-card {
  width: 100px;
  height: 150px;
  border: 3px solid black;
  border-radius: 10px;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  margin: 10px;
}

.flip {
  transform: rotateY(180deg);
}

.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(180deg);
}

.first-card .front {
  background: lightblue;
  width: 100%;
  height: 100%;
}

.second-card .front {
  background: red;
  width: 100%;
  height: 100%;
}

.first-card .back,
.second-card .back {
  background: black;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link rel="stylesheet" type="text/CSS" href="memory.css" />
</head>

<body>
  <div class="first-card">
    <div class="front">
      front
    </div>
    <div class="back">
      back
    </div>
  </div>

  <div class="second-card">
    <div class="front">
      front
    </div>
    <div class="back">
      back
    </div>
  </div>

  <div class="first-card">
    <div class="front">
      front
    </div>
    <div class="back">
      back
    </div>
  </div>

  <div class="second-card">
    <div class="front">
      front
    </div>
    <div class="back">
      back
    </div>
  </div>

  <script src="memory.js"></script>
</body>

</html>

Like I said, I am only beginner, so any help or explanation is welcome. Thank you

Solution

It "doesn't work" because in your flipCard function you're getting the first element that matches with the className fist-card. This element will be always the same one. Just change your function to this:

function flipCard(v){
    v.currentTarget.classList.toggle("flip")
}