Geek Answers Handbook

How to make a button click a div button?

I am trying to make a flip div after clicking a button, but it seems to be working incorrectly and I cannot understand why. I was wondering if anyone could point me in the right direction and correct my mistakes.

My code is:

var init = function() { var card = document.getElementById('card'); document.getElementById('flip').addEventListener('click', function() { card.toggleClassName('flipped'); }, false); }; window.addEventListener('DOMContentLoaded', init, false); 
 .container { width: 200px; height: 260px; position: relative; perspective: 800px; } #card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } #card figure { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } #card .front { background: red; } #card .back { background: blue; transform: rotateY(180deg); } #card.flipped { transform: rotateY(180deg); } 
 <section class="container"> <div id="card"> <figure class="front">1</figure> <figure class="back">2</figure> </div> </section> <section id="options"> <p> <button id="flip">Flip Card</button> </p> </section>

Here you can find the JSFiddle.

Thanks.

+5
source share
3 answers

It has been shown that your code does not work:

  • JSFiddle runs JavaScript in onLoad by default, which is located after the DOMContentLoaded event that you expect, so remove it only for JSFiddle.

  • There is no toggleClassName function in vanilla JavaScript, as far as I know. Instead, I changed it to switch using the class list.

Here is a fixed and working code. I reduced the height of the box so that it fits better with the demo box.

Live Demo:

 var card = document.getElementById('card'); document.getElementById('flip').addEventListener('click', function() { card.classList.toggle('flipped'); }, false); 
 .container { width: 200px; height: 100px; position: relative; perspective: 800px; } #card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; } #card figure { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } #card .front { background: red; } #card .back { background: blue; transform: rotateY( 180deg); } #card.flipped { transform: rotateY( 180deg); } 
 <section class="container"> <div id="card"> <figure class="front">1</figure> <figure class="back">2</figure> </div> </section> <section id="options"> <p> <button id="flip">Flip Card</button> </p> </section>

JSFiddle Version: https://jsfiddle.net/dL9v1ozf/2/

+3
source

Below is a snippet of your problem.

Find out what's wrong

  • The console and console.log are your friends. If you add console.log('clicked me') or alert('hi') to your code inside the click event, you will see that nothing happens. So, if the click event does not fire, what is wrong?
  • Removing DOMContentLoaded does the job of a click! ( Fiddle ) If you open the console, you will see an error message: Uncaught TypeError: card.toggleClassName is not a function . This is because toggleClassName not a valid method name.
  • Use classList.toggle() method instead of toggleClassName()
  • Clean things up by making some variables with human-readable names (e.g. card for the #card element and flipBtn for the #flip button)

Working demo:

 (function() { var card = document.querySelector('#card'); var flipBtn = document.querySelector('#flip'); flipBtn.addEventListener('click', function() { card.classList.toggle('flipped'); }); })(); 
 .container { width: 200px; height: 260px; position: relative; perspective: 800px; } #card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s; color: white; } #card figure { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } #card .front { background: red; } #card .back { background: blue; transform: rotateY( 180deg); } #card.flipped { transform: rotateY( 180deg); } 
 <section class="container"> <div id="card"> <figure class="front">1</figure> <figure class="back">2</figure> </div> </section> <section id="options"> <p> <button id="flip">Flip Card</button> </p> </section>

Some last thoughts

  • Many sandbox sites (e.g. jsbin and jsfiddle) already use all the JavaScript code for you with window.onload .
  • So, if you write JS in the sandbox, do not use window.onload or DOMContentLoaded , because it is already running by the time the browser DOMContentLoaded code. Therefore, your code will never run.
  • In a non-sandboxed environment, make sure you call the above snippet of JavaScript code after loading the page or place it at the very bottom of the page (before the closing body tag).
 window.onload = function() { var card = document.querySelector('#card'); var flipBtn = document.querySelector('#flip'); flipBtn.addEventListener('click', function() { card.classList.toggle('flipped'); }); }
+2
source

I updated your script https://jsfiddle.net/scf0ma4c/5/ , since your code was a bit discharged.

In pure JavaScript, instead of using:

 card.toggleClassName('flipped');

which does not exist at all, you should use:

 +=card.className

If you are using jQuery:

 $("#card").toggleClass("flipped");

simplified.

I believe using:

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

completely pointless since you want the flip to appear on click, so I deleted it.

Look at the violin for more.

0
source

More articles:


All Articles