Avoid repetitive adding and removing of classes in JavaScript

Question

have a javascript code below:

   myBtn.addEventListener('click', () => {
      current_candy++;
      let previous_step = current_step - 1;
      if(( current_candy > 0) && (current_candy <= stepCount)){
        previous.classList.remove("d-none");
        previous.classList.add("d-inline-block");
        step[current_candy].classList.remove("d-none");
        step[current_candy].classList.add("d-block");
        step[current_candy].classList.remove("d-block");
        step[previous_step].classList.add("d-none");
        if (current_candy == stepCount){
          submit.classList.remove("d-none");
          submit.classList.add("d-inline-block");
          next.classList.remove("d-inline-block");
          next.classList.add("d-none");
        }
      } else {
        if(current_candy > stepCount){
            form.onsubmit = () => { return true }
        }
      }
    });

As you can see that I am constantly adding and removing classes from this program.

Is there better way to do this? Is this a good practice?

What's the relationship between current_step and current_candy? And could you tell us in words what the code is meant to do? — T.J. Crowder
– T.J. Crowder, Commented Apr 14, 2021 at 11:35
Well…if you’re using class name to keep track of some kind of “state”, you need sth to save that state anyway. I don’t know what purpose your class name serves, all I can say is, this is normal practice. — hackape
– hackape, Commented Apr 14, 2021 at 11:38
It might help to know that classList.toggle is a method. Also that classList.add and classList.remove can take multiple arguments. I can't see the point in adding and then removing the "d-block" class from the same object (unless one of your current_candy variables should be previous_step). But more importantly it's not really clear what you're trying to achieve overall. It's certainly fine to add/remove classes on click events. — Chris Lear
– Chris Lear, Commented Apr 14, 2021 at 11:39

Ran Turner · Accepted Answer · 2021-04-14 12:03:20Z

1

You can use toggle instead of add/remove classes, it returns true if the class was added, and false if it was removed.

for example:

submit.classList.toggle('d-block');

Check out w3schools example:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_class

answered Apr 14, 2021 at 12:03

Ran Turner

18.7k9 gold badges60 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Avoid repetitive adding and removing of classes in JavaScript

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