Сделайте переключатель, чтобы добавить / удалить класс для всех элементов, которые имеют указанный класс c

Question

Я пытался сделать переключатель, поэтому при нажатии он добавляет класс к каждому элементу, который имеет класс "ChangeColors", но не смог этого сделать. Возвращается с

Ошибка типа: невозможно прочитать свойство 'add' из неопределенного

CSS

.ChangeColors {
    background-color: #ff801b;
    color:black;
}

.bluecolor {
 background-color: blue;
 color:white;
 }

Javascript

function ChangeColors() {
    var single = document.querySelector('.ChangeColors');
    var all = document.querySelectorAll('.ChangeColors');
    if (single.classList.contains('bluecolor')) {
      all.classList.remove('bluecolor');
      console.log("remove");
    } else {
      all.classList.add('bluecolor');
      console.log("add");
    }
}

Answer 1

Вы пытаетесь использовать .classList для типа NodeList, который возвращает document.querySelectorAll, вместо этого вы должны использовать его для каждого элемента в NodeList.

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

const all = document.querySelectorAll('.ChangeColors');

all.forEach(elem => {
  elem.classList.toggle("bluecolor")
});

Answer 2

function ChangeColors() {
    var single = document.querySelector('.ChangeColors');
    var all = [].slice.call(document.querySelectorAll('.ChangeColors')); // transform all to iterable array
    all.forEach(el => { // loop through and apply your condition to every element
      if (single.classList.contains('bluecolor')) {
        el.classList.remove('bluecolor');
        console.log("remove");
      } else {
        el.classList.add('bluecolor');
        console.log("add");
      }
    })
}