Vfrdtyky

I have this memory game I'm trying to add a button that will reveal all of the cards and flipped them again.
all the cards that are flipped are with class flipped. The problem happens when one of the cards is already flipped or hidden, then the function flips it as opposed to the other cards.

How can I fix that?

function revelCards() { 

  var revelCard = document.querySelectorAll('.card'); 

  for (var i = 0; (i < revelCard.length) ; ++i) {

    if (revelCard[i].classList.contains('flipped')){

      revelCard[i].classList.remove('flipped');

    } else {

      revelCard[i].classList.add('flipped');

  }

}

You should simply remove the if sentence, like this:

function revelCards() { 

  var revelCard = document.querySelectorAll('.card'); 

  for (var i = 0; (i < revelCard.length) ; ++i) {

      revelCard[i].classList.add('flipped');

  }

}

Now flipped Cards will remain flipped and all others will flip.

The issue is that your loop just flips based on the current CSS.
However, one of them is flipped manually, so the loop just toggles the CSS.

To fix this, you could store the flipped value in a variable. Before going into the for loop, you could manually toggle (reset) the variable.

Alternatively, you could ignore the value that has been already set. This means that the CSS is not toggled again.

In either case, you would need a reference to the manually-modified original.

If I understood it correctly, you have a set of "cards" whose content you want to show then hide. If I'm right, you could try doing something like this:

window.onload = ()=>{

  let btn = document.getElementById('toggle');

  btn.addEventListener('click', ()=>{

    let cards = document.querySelectorAll('.card');

    let flippedCards = ;

    for(let i = 0; i < cards.length; i++){

      // remember all the cards that are already flipped

      if(cards[i].classList.contains('flipped')){

        flippedCards.push(i);

      }

      // flip all the cards

      cards[i].classList.add('flipped');

    }

    // flip all the cards again after 1 second (1000ms)

    setTimeout(()=>{

        for(let i = 0; i < cards.length; i++){

          cards[i].classList.remove('flipped');

        }

        // return the cards to their original state

        flippedCards.forEach(elem =>{

          cards[elem].classList.add('flipped');

        });

    }, 1000);

  });

};

.container {

  display: flex;

  margin-bottom: 5px;

}



.card {

  transition: background-color 0.3s ease-in-out;

  background-color: red;

  width: 50px;

  height: 50px;

  margin-left: 5px;

}



.flipped {

  background-color: green;

}

<div class="container">

  <div class="card"></div>

  <div class="card"></div>

  <div class="card"></div>

  <div class="card flipped"></div>

  <div class="card"></div>

  <div class="card flipped"></div>

  <div class="card"></div>

  <div class="card"></div>

</div>

<input type="button" value="flip cards" id="toggle">

Also, here's a working example :)