Где ошибка в js?

Question

[bazliiii]

Есть простой js код , задача которого пройтись по массиву html айтемов и при клике на нужный добавлять класс , если класс уже на нем есть - удалять
Проблема в том что класс добавляется , но при повторном нажатии не удаляется ( пробовал так же вместо if использовать toggle )

et listItems = document.querySelectorAll(".shipments__table .shipments__item .shipments__item-dots");

Array.from(listItems).forEach((item) => {
    item.onclick = () => {
        Array.from(listItems).forEach((cl) => cl.classList.remove("active"));
        if(item.classList.contains("active")){
            item.classList.remove("active");
        }else{
            item.classList.add("active");
        }
    };
});

Answer 1

[Rsa97]

В JS ошибки нету, он работает правильно.
Ошибка в логике вашего кода. Вы сначала удаляете с элемента класс в forEach, затем сразу же включаете обратно в if.

Comments

[bazliiii]

Сначала я прохожусь на всем другим элементам и удаляю класс , если он есть ( мне не нужно что бы одновременно активными были два айтема ) , потом уже добавляю класс с айтему на который кликнули

[bazliiii]

А я понял то о чем вы говорите , спасибо

[Rsa97]

bazliiii,

item.onclick = () => {
  const state = item.classList.contains("active");
  Array.from(listItems).forEach((cl) => cl.classList.remove("active"));
  item.classList.toggle('active', !state);
}

Answer 2

[otdameskapizm]

Удалите строчку

Array.from(listItems).forEach((cl) => cl.classList.remove("active"));

и все заработает

Comments

[bazliiii]

Строчка нужна , но я просто ее перенесу в :

if(item.classList.contains("active")){
            Array.from(listItems).forEach((cl) => cl.classList.remove("active"));
            item.classList.remove("active");
        }else{
            item.classList.add("active");
        }

Спасибо