javascriptcsscss-animationscard

multiple flip cards with two button


I have multiple stack of cards with two button one to flip the current ( top) car and the second to add a fallen effect class could not the button to work please help

  const cards = document.querySelectorAll(".card")

    const flipBtn=document.querySelectorAll('.fliping')
    flipBtn.forEach(function(item){
        item.addEventListener('click',function(){

            // cards.forEach(function(card){
            //   this.classList.toggle('flipcard')
            // })
        })

    })

    document.querySelectorAll('.delete').forEach(function(item) {
  item.addEventListener('click', function(e) {
    // console.log("jjjj")
    // let newClass = this.getAttribute('data-delete');
    // let getParent = parent(this, '.item', 1);
    // console.log(getParent)
    cards.classList.add('fall');

  });
}); 
 const cards = document.querySelectorAll(".card")

    const flipBtn=document.querySelectorAll('.fliping')
    flipBtn.forEach(function(item){
        item.addEventListener('click',function(){

            // cards.forEach(function(card){
            //   this.classList.toggle('flipcard')
            // })
        })

    })

    document.querySelectorAll('.delete').forEach(function(item) {
     item.addEventListener('click', function(e) {
    // console.log("jjjj")
    // let newClass = this.getAttribute('data-delete');
    // let getParent = parent(this, '.item', 1);
    // console.log(getParent)
    cards.classList.add('fall');

  });
});

could not get the buttons to work


Solution

  • I think there is some issue in your code. I rewrite javascript code as :

    const cards = document.querySelectorAll(".card");
    const flipBtns = document.querySelectorAll('.fliping');
    const deleteBtns = document.querySelectorAll('.delete');
    
    flipBtns.forEach(function(flipBtn) {
      flipBtn.addEventListener('click', function() {
        const card = this.closest('.card');
        card.classList.toggle('flipcard');
      });
    });
    
    deleteBtns.forEach(function(deleteBtn) {
      deleteBtn.addEventListener('click', function() {
        const card = this.closest('.card');
        card.classList.add('fall');
      });
    });
    

    In the above code firstly I have create constants for cards , flip buttons and delete buttons .After that I have added click event listener. Also if you share html part as well then it would be more clear for me to solve your problem.