Toggle multiple classes inside tag with JS

Question

I am learning to write JS and am trying to create a page where the image is flipped horizontally and vertically with 2 buttons.

At the moment, the buttons toggle a CSS class in the image tag to flip the image, however I cannot find a way for both classes to be added simultaneously in the image tag, to have the result of the image being flipped horizontally and vertically.

Is there a way in JS classic, to toggle multiple classes in a HTML tag?

HTML:

<body>
    <img id="image" src="./img/img_1.jpg">
    <div class="button">
        <button id="button_horizontal">Flip Horizontal</button>
        <button id="button_vertical">Flip Vertical</button>
    </div>
    <script src="script.js"></script>
</body>

CSS:

.flip_horizontal{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.flip_vertical{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

JS:

const horizontal = document.getElementById('button_horizontal');
const vertical = document.getElementById('button_vertical');
const image = document.getElementById('image');

horizontal.addEventListener('click', function(){
    if (image.classList.contains("flip_horizontal")){
        image.classList.remove('flip_horizontal')}
    else image.classList.add('flip_horizontal')
})

vertical.addEventListener('click', function(){
    if (image.classList.contains("flip_vertical")){
        image.classList.remove("flip_vertical")}
    else image.classList.add("flip_vertical")
})

CertainPerformance · Accepted Answer · 2020-04-08 01:16:58Z

This is a CSS issue, not a Javascript issue. When an element has both classes, the later transform property will take precedence over the earlier one - so, when both are applied, only the .flip_vertical's transform: scaleY(-1); will be visible.

Add another CSS rule to apply a scale transform when both classes are active:

.flip_vertical.flip_horizontal {
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

Also, you can use classList.toggle instead of checking .contains / .add / .remove:

const horizontal = document.getElementById('button_horizontal');
const vertical = document.getElementById('button_vertical');
const image = document.getElementById('image');

horizontal.addEventListener('click', function() {
  image.classList.toggle("flip_horizontal");
})

vertical.addEventListener('click', function() {
  image.classList.toggle("flip_vertical");
})

.flip_horizontal {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.flip_vertical {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

.flip_vertical.flip_horizontal {
  -webkit-transform: scaleY(-1, -1);
  transform: scale(-1, -1);
}

<img id="image" src="https://via.placeholder.com/150x300">
<div class="button">
  <button id="button_horizontal">Flip Horizontal</button>
  <button id="button_vertical">Flip Vertical</button>
</div>

Collectives™ on Stack Overflow

Toggle multiple classes inside tag with JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related