Using classList in Javascript function to add CSS classes, but styles conflict because latest class does not take precedence

Question

My function counts the number of cards visible on the screen and if all are shown, I add the arrow-up class to my icon, if some cards are still hidden from the user, arrow adds -down icon.

const showMoreIcon = document.querySelector('.cta-icon');

function myFunction(){
   const btnIcon = cardsOnShow >= cards.length ? 'arrow-up' : 'arrow-down';
   showMoreIcon.classList.add(btnIcon);
}

<span class="medium-icon"></span>

This works, but I can see in the DOM that the correct class is added to the span as I would expect it to be since the arrow-down class was added first (in The user has to expand the content multiple times before all visible cards are shown) - then, although the arrow-up class is added, it does not override the arrow-down. p>

How to ensure that when arrow-up is added, arrow-down is removed and vice versa? I've previously used toggle to implement a simple open/close icon, but this doesn't work as it may expand multiple times before closing.

Answer 1

I recommend deleting courses you no longer need:

function myFunction(){
   if (cardsOnShow >= cards.length) {
      showMoreIcon.classList.add('arrow-up')
      showMoreIcon.classList.remove('arrow-down')
   } else {
      showMoreIcon.classList.remove('arrow-up')
      showMoreIcon.classList.add('arrow-down')
   }
}

Answer 2

Cascading takes into account many factors, which is a set of rules used to determine which rule "wins" when two conflicting rules are applied to the same element.

The order in which classes are defined on HTML elements is not one of these factors.

and

are the same as far as cascading is concerned.

---

Delete classes that should not be applied.

if (cardsOnShow >= cards.length) {
    showMoreIcon.classList.add("arrow-up");
    showMoreIcon.classList.remove("arrow-down");
} else {
    showMoreIcon.classList.add("arrow-down");
    showMoreIcon.classList.remove("arrow-up");
}

Or write the CSS in a way that only cares about a single class to change the orientation:

.arrow {
    /* arrow up CSS */
}
.arrow.invert {
    /* override the up rule and replace with the down rule
}

Then

if (cardsOnShow >= cards.length) {
    showMoreIcon.classList.remove("invert");
} else {
    showMoreIcon.classList.add("invert");
}