How to change class in a list of items just to element that i clicked-CodePudding

I want to add to take a class of an element to click, to the first click to put my class and to the second to take out my class. I only managed to add the class to the first click and I can't get it back to normal on the second click on the item. I also tried toggle but something is missing and I don't know what. Thanks :D

const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.addEventListener('click', function() {
    items.forEach(el => el.classList.remove('active'));
    this.classList.add('active');
  })
});

.list {
  margin: 100px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 700px;
}

.item {
  width: 100px;
  aspect-ratio: 1;
  background-color: blueviolet;
}

.active {
  background-color: brown;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

You have to store the active state of the clicked element before removing the active class from all the elements. Then, you can set the active state of the clicked element to the opposite of what it was.

const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.addEventListener('click', function() {
    // Get the active state of the clicked element
    let active = this.classList.contains("active");
    items.forEach(el => el.classList.remove('active'));
    // Toggle the active state of the clicked element
    if(active){
      this.classList.remove("active");
    } else {
      this.classList.add("active");    
    }
  })
});

.list {
  margin: 100px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 700px;
}

.item {
  width: 100px;
  aspect-ratio: 1;
  background-color: blueviolet;
}

.active {
  background-color: brown;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

You don't have to loop through all elements every time. You can just look up the currently active element. This should work:

const items = document.querySelectorAll(".item");

items.forEach(item => {
  item.addEventListener('click', function(){
    // Check if clicked element is active
    if (this.classList.contains("active")){
      // Element was active, deactivate and terminate
      this.classList.remove("active");
      return;
    }
    // Element clicked was not active
    // Find active element in list and deactivate, if any
    var activeElement = document.querySelector(".list .active");
    if (activeElement != null) activeElement.classList.remove("active");
    this.classList.add("active");
  })
});

See live demo.