CODEWITHSUNDEEP
javascriptcss
Lordan
Lordan

Reputation: 94

How to remove class in JavaScript and save the ones that i removed

So, i made a memory game with html,css and javascript .

I made a button that Toggle the cards, mean that all the cards who have

('flipped') class will remove or add to there class. its look like this:

function toggle (){
var divs = document.querySelectorAll('.card');

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

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

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

}else{

divs[i].classList.add('flipped'); } 
} 
 }

I want to make the card's that already flipped , not to be affected by the Toggle button.

Any thought ?

Upvotes: 1

Views: 168

Answers (3)

ADuboisForge
ADuboisForge

Reputation: 121

The classList.add() method will not add the class 'flipped' if that element already contains that class, so I'm guessing you want to keep track of cards that have flipped in the past? (I couldn't see your video). To do this you can use an asynchronous array, scoped outside of the function, to keep track of whether a card has flipped or not. Just create an empty array an then use the for loop to set values in the array to 1 whenever a card has been toggled, then check to whether that value exists in the array before adding the 'flipped' class, like so...

var dArr = [];

function toggle (){
  var divs = document.querySelectorAll('.card');
  for (var i = 0; i < divs.length; i++){ 
    if (divs[i].classList.contains('flipped')){
    divs[i].classList.remove('flipped'); 
    dArr[i] = 1;
  } else if (!dArr[i]){ 
    divs[i].classList.add('flipped'); } 
  } 
}

Side note: there was a simple error in your code, you put 0 < divs.length make sure to include i < divs.length to prevent a neverending for loop. :)

If you want to make your code a little faster, you can also grab the '.card' divs whenever the page loads once, so this does not have to be done every time the toggle() function has fired. This should work unless you are planning on adding more cards as the game progresses. I would also wrap the values up in an object to avoid using global variables, which will prevent future conflicts. And finally, I wouldn't call your function toggle() because that's commonly used in JavaScript and JavaScript libraries. Anyway here's my version if you're interested, the init function grabs all the '.card' divs, sticks them into an element array in the dVars object, and the dArr variable is also stored the same object to prevent the use of global variables.

var dVars = {
  dArr: [],
  divs: undefined
}


function flip (){
  for (i = 0; i < dVars.divs.length; i++){
    console.log(i);
    if (dVars.divs[i].classList.contains('flipped')){
        dVars.divs[i].classList.remove('flipped');
        dVars.dArr[i] = 1;
    } else if (!dVars.dArr[i]){
      dVars.divs[i].classList.add('flipped');
      console.log(i);
    }
  }
}

function init() {
  dVars.divs = document.querySelectorAll('.card');
}

window.onload = init;

You could also do this without the asynchronous array by adding a class 'hasFlipped' to every <div> along with the 'flipped' class, and then checking to see whether the <div> has that class before adding the class 'flipped' again:

var dVars = {
  divs: undefined
}


function flip (){
  for (i = 0; i < dVars.divs.length; i++){
    if (dVars.divs[i].classList.contains('flipped')){
        dVars.divs[i].classList.remove('flipped');
    } else if (!dVars.divs[i].classList.contains('hasFlipped')){
      dVars.divs[i].classList.add('flipped', 'hasFlipped');
    }
  }
}

function init() {
  dVars.divs = document.querySelectorAll('.card');
}

window.onload = init;

Hope this helps!

Upvotes: 0

T. Jefferds
T. Jefferds

Reputation: 61

It's hard to understand what do you want the button to do, but if you want to turn the flipped cards back facedown you don't need the else statement. You need to add the class flipped to the cards when you click on them or some other way that you intend to and then to use this button to turn them all face down again. Explain a little bit more about the purpose of the button please.

Upvotes: 0

Gaurav Saraswat
Gaurav Saraswat

Reputation: 1383

I think you are looking for :not() selector.

var nonFlippedCards = document.querySelectorAll('.card:not(.flipped)');

for (var i = 0; 0 < nonFlippedCards.length; i++){ 
  divs[i].classList.add('flipped'); } 
}

now save it.

Upvotes: 1

Related Questions