Myujth

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 :)