单击div上的一个按钮来翻转div

Question

I am trying to teach myself HTML, CSS and JS and started to play around on codepen.io. I've been in a rut, trying to get the div (on this pen http://codepen.io/janicedarling/pen/MwNZVp ) to flip when the button "create account" or "submit" is clicked. Currently using this tutorial http://callmenick.com/post/css-transitions-transforms-animations-flipping-card I am able to get the div to flip when anywhere is clicked. I tried changing this in the javascript
document.querySelectorAll(".tab");
to
document.querySelector("#create");
but then nothing happens still. I left the CSS in place. Can anyone offer any advice on how to get the required transformation?

Answer 1

First, add an id to your submit button:

    <input id="signup" type="submit" placeholder="Go">

Next, let's fix your JS. You don't need a bunch of code from that other example that looks for all the different cards to wire up. In your case, you have only one card, and you need only two event callbacks (one to flip and the other to un-flip). We use the new id here to find the specific button that causes the un-flip.

(function() {
  var tab = document.querySelector('.tab');

  document.getElementById('create').addEventListener('click', function() {
    tab.classList.add('flipped');
  }, false);

  document.getElementById('signup').addEventListener('click', function() {
    tab.classList.remove('flipped');
  }, false);

})();

With this, two specific buttons are wired up to the flip and un-flip actions, so the card only flips when you want it to.