title: How can I make an event listener fire only once?
body: <p>I am building a very simple memory matching game with 6 cards. Each card is in a <code>div</code> with the class of <code>.card</code> that contains two more <code>div</code> elements - front face of the card (just a simple green background img) and a back face of the card (a random image i've picked).</p>
  <p>Backfaces
  <a href="https://i.stack.imgur.com/NFNz5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NFNz5.png" alt="enter image description here" /></a></p>
  <p>Frontfaces
  <a href="https://i.stack.imgur.com/qEjF4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qEjF4.png" alt="enter image description here" /></a></p>
  <p>Every card has a click event listener. Once you click the card, the card rotates from it's back side to it's front side and reveals the image. If the two images you've picked are a match, you receive +1 <strong>Score</strong>. If the images you've picked do not happen to be a match, all of the cards rotate to their back face and you receive +1 to &quot;<strong>Fails</strong>&quot; and you lose the game.</p>
  <p>The main problem is that I can click and rotate the <strong>same</strong> card over and over again due to the event listener. Is there any way to make it fire only once? I've tried to use <code>once: true</code> on the event listener but that caused the cards to be unclickable even after losing the game thus i've removed it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const cards = document.querySelectorAll(".card");
  const images = document.querySelectorAll("img");
  let scoreElement = document.getElementById("score");
  let failsElement = document.getElementById("fails");
  let failsAmount = 0;
  let scoreAmount = 0;
  let pickedCards = [];
  
  function pickCards() {
      // Iterate through every div with the class of ".card"
      for (let i = 0; i &lt; cards.length; i++) {
          // Add an event listener to them
          cards[i].addEventListener("click", function() {
              // Rotate the card
              cards[i].classList.toggle("flipcard");
              // After clicking on the card that contains the img, push the img into the pickedCards array.
              pickedCards.push(images[i]);
              checkForMatch();
          });
      }
  }
  
  function checkForMatch() {
      // Check the source of the images from the array
      if (pickedCards[0].src == pickedCards[1].src) {
          alert("Match! +1 score");
          scoreAmount++;
          scoreElement.textContent = "Score: " + scoreAmount;
          // Empty the array so the player can pick another 2 cards
          pickedCards = [];
      }
  
      else {
          hideCards();
          alert("Not a match! Sorry!");
          failsAmount++;
          failsElement.textContent = "Fails: " + failsAmount;
          pickedCards = [];
      }
  }
  
  function hideCards() {
      for (let i = 0; i &lt; cards.length; i++) {
          setTimeout(function() {
              // Remove the flipcard class from the cards and show the front face again.
              cards[i].classList.remove("flipcard");
          }, 1000); 
      }
  }
  
  pickCards();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      padding: 0;
      margin: 0;
  }
  
  *, *:before, *:after {
      box-sizing: inherit;
  }
  
  html {
      box-sizing: border-box;
  }
  
  html,body {
      height: 100%;
  }
  
  .card-container {
      display: flex;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      perspective: 1200;
  }
  
  .flipcard {
      transform: rotateY(-180deg);
  }
  
  .card {
      width: 200px;
      height: 200px;
      transition: all 0.7s;
      transform-style: preserve-3d;
      margin: 0em 1em;
  }
  
  .front-card, .back-card {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      backface-visibility: hidden;
  }
  
  .front-card {
      background: url("./IMGs/block.jpg") no-repeat center/cover;
  }
  
  .back-card {
      transform: rotateY(-180deg);
  }
  
  .back-card img {
      width: 200px;
      height: 200px;
  }
  
  #score, #fails {
      font-size: 2em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card-container"&gt;
          &lt;div class="card"&gt;
              &lt;div class="front-card"&gt;&lt;/div&gt;
              &lt;div id="card1" class="back-card"&gt;&lt;img src="IMGs/eric.jpg" alt=""&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card"&gt;
              &lt;div class="front-card"&gt;&lt;/div&gt;
              &lt;div id="card2" class="back-card"&gt;&lt;img src="IMGs/john.webp" alt=""&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card"&gt;
              &lt;div class="front-card"&gt;&lt;/div&gt;
              &lt;div id="card3" class="back-card"&gt;&lt;img src="IMGs/salim.png" alt=""&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card"&gt;
              &lt;div class="front-card"&gt;&lt;/div&gt;
              &lt;div id="card4" class="back-card"&gt;&lt;img src="IMGs/salim.png" alt=""&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card"&gt;
              &lt;div class="front-card"&gt;&lt;/div&gt;
              &lt;div id="card5" class="back-card"&gt;&lt;img src="IMGs/eric.jpg" alt=""&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="card"&gt;
              &lt;div class="front-card"&gt;&lt;/div&gt;
              &lt;div id="card6" class="back-card"&gt;&lt;img src="IMGs/john.webp" alt=""&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;p id="score"&gt;Score: 0&lt;/p&gt;
      &lt;p id="fails"&gt;Fails: 0&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am still new to this, so any tips will be aprecitated, thank you.</p>