title: Flip Card HTML: Wont flip or stay flip when I click
body: <p>I'm making flip card game, but the photo won't stay opened when I click on it. I've listed down what needs to be done in the JS, but can't seem to wrap my head around how I can implement them to my HTML file. The photos are supposed to appear randomly (like typical flipcard games), but when I try to add some other functions on the JS file, suddenly the random function that previously worked, no longer works.</p>
  <p>Also, I'm supposed to use .card.open for the photo to stay open when I click them. But when I add this function to my CSS file, click function no longer works.</p>
  <p>I referred to <a href="https://marina-ferreira.github.io/projects/js/memory-game/" rel="nofollow noreferrer">this tutorial</a> since this is exactly how I want my code to turn out to be but nothing seems to be working.</p>
  <p>Codepen is here: <a href="https://codepen.io/siapanamasaya/pen/GRqwdQE" rel="nofollow noreferrer">https://codepen.io/siapanamasaya/pen/GRqwdQE</a></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>let cards = document.getElementsByClassName("card");
  if (cards !== 0) {
    let card_array = [];
    for (let i = 0; i &lt; cards.length; i++) {
      card_array.push(i);
    }
  
    for (let i = 0; i &lt; cards.length; i++) {
      let j = Math.floor(Math.random() * card_array.length);
      let card = cards.item(card_array[j]);
      card.parentNode.appendChild(card);
      card_array.splice(j, 1);
    }
  }
  
  let hasFlippedCard = false;
  let lockBoard = false;
  let firstCard, secondCard;
  
  function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;
  
    this.classList.add('flip');
  
    if (!hasFlippedCard) {
      hasFlippedCard = true;
      firstCard = this;
  
      return;
    }
  
    secondCard = this;
    checkForMatch();
  }
  
  function checkForMatch() {
    let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
  
    isMatch ? disableCards() : unflipCards();
  }
  
  function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
    resetBoard();
  }
  
  function unflipCards() {
    lockBoard = true;
  
    setTimeout(() =&gt; {
      firstCard.classList.remove('flip');
      secondCard.classList.remove('flip');
  
      resetBoard();
    }, 1500);
  }
  
  function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: gray;
  }
  
  .card {
    width: 180px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: 1s;
    margin: 5px;
  }
  
  .card-front,
  .card-back {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    position: absolute;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  
  .card-back {
    background-color: orange;
  }
  
  img {
    width: 170px;
    height: 190px;
    padding: 5px;
    border-radius: 8px;
  }
  
  .card-front {
    background-color: white;
    transform: rotateY(180deg);
  }
  
  
  /*will be removed once .card.open works*/
  
  .card:active {
    transform: rotateY(180deg);
  }
  
  .card-container {
    display: flex;
    flex-wrap: wrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card-container"&gt;
    &lt;div class="card" data-framework="one"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="two"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_02.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="three"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_03.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="four"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_04.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="five"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_05.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="six"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_06.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="seven"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_07.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="eight"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_08.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="nine"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_09.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="ten"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_10.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="eleven"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_11.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="twelve"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_12.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="thirteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_13.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="fourteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_14.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="fifteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_15.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="sixteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_16.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="seventeen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_17.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="eighteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_18.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="nineteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_19.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="one"&gt;
  &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_01.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="two"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_02.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="three"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_03.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="four"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_04.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="five"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_05.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="six"&gt;
      &lt;div class="card-front"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_06.jpg" alt = ""&gt;
      &lt;/div&gt;
      &lt;div class="card-back"&gt;
        &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="seven"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_07.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="eight"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_08.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="nine"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_09.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="ten"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_10.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="eleven"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_11.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="twelve"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_12.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="thirteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_13.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="fourteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_14.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="fifteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_15.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="sixteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_16.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="seventeen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_17.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="eighteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_18.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="card" data-framework="nineteen"&gt;
  &lt;div class="card-front"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/summary/images/summary_successive-chancellor_img_19.jpg" alt = ""&gt;
  &lt;/div&gt;
  &lt;div class="card-back"&gt;
    &lt;img src="https://www.takushoku-u.ac.jp/img/effort/logo_project.svg"&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>