How to Add/Remove Several Classes in One Single Instruction With Classlist

Is there a way to add/remove several classes in one single instruction with classList?

elem.classList.add("first");
elem.classList.add("second");
elem.classList.add("third");

is equal

elem.classList.add("first","second","third");

Why does my attempt to add and remove classes to an HTML-element only work one way?

The problem is that you are adding event listeners to these elements in your setup() function:

document.querySelectorAll("li.closed")[0]
document.querySelectorAll("li.closed")[1]
document.querySelectorAll("li.closed")[2]

Those elements do not exist yet when you execute setup(). That's why when clicking on a <li> element with class="closed", it won't work.

The solution is to check the class of that specific element after clicking it. Like so:

function onLiClick(event) {  if (event.target.className === 'open') event.target.className = 'closed';  else event.target.className = 'open';}
function setup() {  for (var li of document.querySelectorAll('li')) li.addEventListener('click', onLiClick);}
setup();

.open::after {  content: "open";}
.closed::after {  content: "closed";}

<ul>  <li class="open"></li>  <li class="open"></li>  <li class="open"></li></ul>

Is there a better way to add/remove classes for menu with Javascript

first of all, welcome on Stack Overflow :)

Your code may benefit from classList.toggle (https://developer.mozilla.org/pl/docs/Web/API/Element/classList).

You can have conditional statements there, meaning classList.toggle("string", boolean), like this:

icons.addEventListener('click', (e)=> {
  const isSkate = e.target.className === "skate"; // this could also be altered using classList.contains()

  navigation.classList.toggle('slideIn', !isSkate);
  navigation.classList.toggle('slideOut', isSkate);
  skateboard.classList.toggle('skateOff', isSkate);
  x.classList.toggle('xslide', isSkate);
});

A little PoC can be found here: https://codepen.io/tomekbuszewski/pen/XyNzqG

If you need more help, please post your code to CodePen or JSFiddle, it would be easier to discuss then.

Is there a more optimal way to change multiple classes and ids with javascript than this?

Read JS comments:

window.onload = function() {  var foods = document.getElementsByClassName('food'); // To get length of all food pictures.        for(var i = 0; i < foods.length; i++) { // for loop to create click function on each image.            var food = foods[i]; // get current class index.            food.onclick = function() { // DOM onclick function.                Array.from(foods).forEach(function(e){e.classList.remove('selected')}) // remove 'selected' class from all 'food' classes.                 this.classList.add('selected'); // add selected class to current '.food'.            }        }    }

.food:hover {    filter: brightness(75%); !important;}
.selected {  border: 3px solid #186472 !important;}

<img class="food" src="https://picsum.photos/200">
<img class="food" src="https://picsum.photos/200">
<img class="food" src="https://picsum.photos/200">
<img class="food" src="https://picsum.photos/200">
<img class="food" src="https://picsum.photos/200">
<img class="food" src="https://picsum.photos/200">
<img class="food" src="https://picsum.photos/200">
<img class="food" src="https://picsum.photos/200">
<img class="food" src="https://picsum.photos/200">

How to Add/Remove Several Classes in One Single Instruction With Classlist

Is there a way to add/remove several classes in one single instruction with classList?

Why does my attempt to add and remove classes to an HTML-element only work one way?

Is there a better way to add/remove classes for menu with Javascript

Is there a more optimal way to change multiple classes and ids with javascript than this?

Related Topics

Leave a reply