Multiple card flip using getElelementsByClass

Question

I'm doing a card flip using CSS3 and javascript on multiple divs. I'm using desssandro's 3d Card Flip but his is only using an ID and therefore one div at a time. I have several cards in one page that I want to flip. How can I do it?

Here's the desandro's script and a fiddle

http://jsfiddle.net/vanduzled/nawdpj5j/

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

If I make my divs a class instead of id's, the script below doesn't work:

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

EDIT

I created a fiddle byclassname but it doesn't work

http://jsfiddle.net/vanduzled/omLac95t/

Try getElementsByClassName(), not getelementByClass – ajmajmajma Nov 13 '14 at 03:52 — ajmajmajma, Nov 13 '14 at 03:52

artm · Accepted Answer · 2014-11-13T05:39:24.027

1

Try this http://jsfiddle.net/nawdpj5j/6/ I'll leave the styling to you. getElementsByClassName returns an array so you need to go through the elemnts in the array and call toggleClassName on each. I also modified the css to replace #card with .card

var init = function() {
  var cards = document.getElementsByClassName("card");  
  document.getElementById('flip').addEventListener( 'click', function(){
      for (i = 0; i < cards.length; i++){
         cards[i].toggleClassName('flipped');
      }
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

Update:

See http://jsfiddle.net/nawdpj5j/10/

add data-targetid to flip buttons:

<button class="flip" data-targetid="card">Flip Card</button>

Get all flip items and find the button to flip from button's dataset:

var init = function() {
  var flippers = document.getElementsByClassName("flip");

    for(i = 0; i < flippers.length; i++){
        flippers[i].addEventListener( 'click', function(){
            var cardID = this.dataset.targetid;
            var card = document.getElementById(cardID);
            card.toggleClassName('flipped');
  }, false);
    }
};

edited Nov 13 '14 at 05:39

answered Nov 13 '14 at 04:01

artm

8,554
3
26
43

This might work. But can the cards have separate its own button? like for example #flip1, #flip2 – vanduzled Nov 13 '14 at 04:09
You can have multiple buttons but then you don't need to flip them by class name, just give them different ids. I thought you wanted to flip all cards on page with a single click and that's why you wanted to flip by class name? – artm Nov 13 '14 at 04:19
This is what I actually need. The code is very literal though. I thought there were other options. I need to do 8 cards so I just repeat this 8 times right? – vanduzled Nov 13 '14 at 05:21
@user3655840 OK to use jQuery, yeah? – artm Nov 13 '14 at 05:27
@user3655840 See the update to the answer. It's using javascript and you need to write the code once, but you need to add `data-targetid` to the flip buttons to indicate the id of the div to flip. – artm Nov 13 '14 at 05:40
will you able to help wit this? http://stackoverflow.com/q/26965050/3655840 @artm – vanduzled Nov 17 '14 at 03:31

Prabu · Answer 2 · 2014-11-13T04:15:38.260

0

There are a couple of issues:

The click event is being added to the button, so it should be getElementsById('flip').
Retrieving the card should be getElementsByClassName or you can use jQuery's $('.card').
The html and css are written for a single card.

var init = function() {
    var cards = $('.card');

    document.getElementById('flip').addEventListener( 'click', function(){
        $.each(cards, function( key, value ) {      
            value.toggleClassName('flipped');
        });
    }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

Here is a solution that works for multiple cards: http://jsfiddle.net/pwee167/nawdpj5j/7/

edited Nov 13 '14 at 04:15

answered Nov 13 '14 at 03:53

Prabu

4,097
5
45
66

The above example uses jQuery to find the cards with `$('.card'), but it should work equally well with `getElementsByClassName`. This jsFiddle demonstrates that: http://jsfiddle.net/pwee167/nawdpj5j/8/ – Prabu Nov 13 '14 at 04:17
What browser/version are you using to test your code in? – Prabu Nov 13 '14 at 04:19
Now it works. I'm using several browsers mainly IE, FF, GC. But I need it work with individual button per card. Not one button for several cards. – vanduzled Nov 13 '14 at 05:59

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

You can check out the top solution for this question.

The answer basically assigns the return value of getElementByClassName() to an array an then traverses it. When applied to you problem, it might look like this:

Also, Working JSfiddle.

var init = function() {
  var cards = document.getElementsByClassName('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    for (var x=0; x<cards.length; x++) {  
      cards[x].toggleClassName('flipped');
    }
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

edited May 23 '17 at 10:33

Community

1
1

answered Nov 13 '14 at 03:58

Wold

952
1
13
25

I tried your code but the card doesn't flip. I tried it with one div but here's an fiddle of two divs http://jsfiddle.net/vanduzled/9u3tu4mj/ – vanduzled Nov 13 '14 at 04:11
On your fiddle, when you click on the first button, the two cards flip. I need button for one card. The second button doesn't do anything. – vanduzled Nov 13 '14 at 05:24
Oh so you want each button to flip a separate card? I thought you waned one button to flip multiple cards? Anyway, glad you got it resolved. – Wold Nov 13 '14 at 16:36

Multiple card flip using getElelementsByClass

3 Answers3