Changing CSS class with javascript id messes up with CSS styling?

Question

I m trying to make an HTML responsive webpage with cards that flip 180 degrees when you click them and after I changed the div class with an id for onclick event my CSS styling messed up and put the cards randomly on the screen. How can I fix this?

I tried to copy the styling of the CSS class to the id styling but that destroys the animation.

 * { margin: 0; padding: 0; box-sizing: border-box; } .container { //all of the divs are in a container div display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 2rem auto; } .card-flip, #misto1, #misto2, ....{ position: relative; margin: 1rem; } .card-flip-faces, #misto1, #misto2,.... { -webkit-animation-play-state: paused; transition: all ease .5s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: perspective(600px) rotateY(0deg); transform: perspective(600px) rotateY(0deg); } .card-flip .card-flip-faces { -webkit-transform: perspective(600px) rotateY(180deg); transform: perspective(600px) rotateY(180deg); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25); } .card-flip-front, .card-flip-back { padding: 2rem; width: 100%; height: 100%; text-align: center; transition: all ease .5s; } .card-flip-front { display: block; color: #11998e; background-color: white; } .card-flip-back { position: absolute; top: 0; color: white; background-color: #11998e; -webkit-transform: perspective(600px) rotateY(180deg); transform: perspective(600px) rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .card-flip-icon { font-size: 600%; } .card-flip-title { margin-top: 2rem; margin-bottom: 1rem; font-weight: normal; text-align: center; text-transform: uppercase; } @media screen and (max-width: 576px) { .card-flip { width: calc(100% - 2rem); } } @media screen and (min-width: 576px) { .card-flip { width: calc(50% - 2rem); } } @media screen and (min-width: 992px) { .card-flip { width: calc(33.33% - 2rem); } } 

 <!-- This is how all of my divs look like --> <div id="misto1" onclick="handler_click1()"> <!--before id it was class="card-flip--> <div class="card-flip-faces"> <div class="card-flip-front"> <i class="card-flip-icon fas fa-flask"></i> <h4 class="card-flip-title">Title</h4> <p class="card-flip-text">Some text</p> </div> <div class="card-flip-back"> <i class="card-flip-icon fas fa-flask"></i> <h4 class="card-flip-title">Hemoleucograma</h4> <p class="card-flip-text"> Another fancy text</p> </div> </div> </div> <div id="misto2" onclick="handler_click2()"> <div class="card-flip-faces"> <div class="card-flip-front"> <i class="card-flip-icon fas fa-flask"></i> <h4 class="card-flip-title">Title</h4> <p class="card-flip-text">Some text</p> </div> <div class="card-flip-back"> <i class="card-flip-icon fas fa-flask"></i> <h4 class="card-flip-title">Hemoleucograma</h4> <p class="card-flip-text"> Another fancy text</p> </div> </div> </div> <!-- this is the script for the onclick animation --> <script type="text/javascript"> var x=0; function handler_click1(){ if(x==0){ document.getElementById('misto1').className ='card-flip'; x=1; } else{ document.getElementById('misto1').className ='card-flip-faces'; x=0; } } function handler_click2(){ if(x==0){ document.getElementById('misto2').className ='card-flip'; x=1; } else{ document.getElementById('misto2').className ='card-flip-faces'; x=0; } } </script> 

Answer 1

The intended method of adding and removing specific classes is to use Element.classList , which supports the .add , .remove , and .toggle methods.

These methods can even be overloaded with additional string arguments to alter multiple classes at once. Using the toggle method, your use case could be as trivial as:

document.getElementById("misto1").addEventListener("click", function(e){
    e.target.classList.toggle("flipOver");
    // Where .flipOver is a class that rotates 180deg around the y-axis.
});

Here's an example of this in action using your code. I changed as little as possible, so there's still a decent amount of refactoring that needs to be done.