Why is only one card flipping?

Question

I don't understand why the first card is flipping but the second is not. All I did was duplicate the html. Thanks for the help. I am new to javascript. It works on the first card but not on the second.

<div class="flipCard"> 
  <div class="card"> 
    <div class="side front"><img src="img/back100.png"></div> 
    <div class="side back"><img src="img/lion.png"></div> 
  </div> 
</div>

<div class="flipCard"> 
  <div class="card"> 
    <div class="side front"><img src="img/back100.png"></div> 
    <div class="side back"><img src="img/lion.png"></div> 
  </div> 
</div>

css

 .flipCard {
      -webkit-perspective: 800;
      -ms-perspective: 800;
      -moz-perspective: 800;
      -o-perspective: 800;
       width: 100px;
       height: 100px;
       position: relative;
    }
    .flipCard .card.flipped {
      transform:rotatey(-180deg);
    }
    .flipCard .card {
      width: 100%;
      height: 100%;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: 0.5s;
      -moz-transform-style: preserve-3d;
      -moz-transition: 0.5s;
      -ms-transform-style: preserve-3d;
      -ms-transition: 0.5s;
      -o-transform-style: preserve-3d;
      -o-transition: 0.5s;
      transform-style: preserve-3d;
      transition: 0.5s;
    }
    .flipCard .card .side {
      width: 100%;
      height: 100%;
      cursor: pointer;
      position: absolute;
      box-sizing: border-box;
      z-index: 2;
      backface-visibility: hidden;  /* W3C */
      box-shadow: 0 0 10px rgba(0,0,0,0.6);
    }
    .flipCard .card .back {

      transform:rotatey(-180deg);

    }

JS

var cardToFlip = document.querySelector(".card");
cardToFlip.addEventListener("click", toggleToFlip);

function toggleToFlip() {
    this.classList.toggle("flipped");
}

EDIT: Here was the fix!!

var cardToFlip = document.querySelectorAll(".card");

    for (var card of cardToFlip){
    card.addEventListener("click", toggleToFlip);
    }

function toggleToFlip() {
    this.classList.toggle("flipped");
}

It's making me write more random words to submit this. Here are more random words.

score 6 · Answer 1 · answered Apr 24 '20 at 14:45

6

document.querySelector(".card") only selects the first match. Use document.querySelectorAll(".card"); and then forEach over those:

document.querySelectorAll(".card").forEach( card => card.addEventListener('click', toggleToFlip) );

answered Apr 24 '20 at 14:45

marks

1,501
9
24

Thank you this worked!! I used a for-of instead because it seemed simpler but same idea!! ``var cardToFlip = document.querySelectorAll(".card"); for (var card of cardToFlip){ card.addEventListener("click", toggleToFlip); } function toggleToFlip() { this.classList.toggle("flipped"); }`` – Amber Apr 24 '20 at 14:50

Why is only one card flipping?

1 Answers1