Добавление и удаление класса из элементов HTML в ES6 / ES7

Question

У меня есть следующий код , в котором у меня есть некоторые HTML button элементы.

Я хочу, чтобы всякий раз, когда я click кнопка, класс selected должен переключаться в этой кнопке.

Вот код:

window.onload = function() {
  const [...btns] = document.getElementsByTagName('button');
  
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
      if(this.className.split(' ').indexOf('selected') > -1) {
        this.className = this.className.split(' ').pop();
      } else {
        this.className = this.className.split(' ').push('selected').join(' ');
      }
      
      console.log(this.className);
    });
  }
}

button {
  outline: none;
  border: none;
  padding: 3px 7px;
  color: #FF4A3F;
  background: #E7E7E7;
  font: 500 16pt calibri;
  transform: scale(1, 0.95);
}
.selected {
  background: #353553;
  color: white;
}

<button>Home</button>
<button>Admission</button>
<button>Results</button>
<button>Curriculum</button>
<button>Contact us</button>

Но когда я запустил приведенный выше код, я получил следующее сообщение об ошибке:

Uncaught TypeError: this.className.split (...). Push (...). Соединение не являетсяфункция

Что я делаю не так?

Answer 1

Проблема в том, что push не возвращает новый массив, он возвращает длину нового массива. MDN документы для push.Поэтому, когда вы попадаете на join, он пытается соединить число, а не массив, как вы ожидаете.

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

document.querySelectorAll('button').forEach(btn => {
    btn.addEventListener('click', () => {
        btn.classList.toggle('selected');
    });
});

Answer 2

window.onload = function() {
  const [...btns] = document.getElementsByTagName('button');
  
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
   this.classList.contains("selected")?this.classList.remove("selected"):this.classList.add("selected");
    });
  }
}

button {
  outline: none;
  border: none;
  padding: 3px 7px;
  color: #FF4A3F;
  background: #E7E7E7;
  font: 500 16pt calibri;
  transform: scale(1, 0.95);
}
.selected {
  background: #353553;
  color: white;
}

<button>Home</button>
<button>Admission</button>
<button>Results</button>
<button>Curriculum</button>
<button>Contact us</button>

Answer 3

Задумывались ли вы об использовании jquery для этого, у них есть метод удаления и метод удаления для этого:

$("button").removeClass("selected");


$("button").addClass("selected");

Надеюсь, это поможет:)

Answer 4

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

document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', () => {
    btn.classList.toggle('selected');
  });
});

button {
  outline: none;
  border: none;
  padding: 3px 7px;
  color: #FF4A3F;
  background: #E7E7E7;
  font: 500 16pt calibri;
  transform: scale(1, 0.95);
}
.selected {
  background: #353553;
  color: white;
}

<button>Home</button>
<button>Admission</button>
<button>Results</button>
<button>Curriculum</button>
<button>Contact us</button>

Проблема с вашим исходным кодом заключается в том, что push не возвращает массив;вместо этого он возвращает длину массива, поэтому он не является цепным (к сожалению).То же самое с pop().

Настройка вашего кода, чтобы он работал, при условии , что последний className всегда будет selected, будет выглядеть так:

window.onload = function() {
  const [...btns] = document.getElementsByTagName('button');
  
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
      const classNameArr = this.className.split(' ');
      if(classNameArr.indexOf('selected') > -1) {
        classNameArr.pop();
        this.className = classNameArr.join(' ');
      } else {
        classNameArr.push('selected')
        this.className = classNameArr.join(' ');
      }
      console.log(this.className);
    });
  }
}

button {
  outline: none;
  border: none;
  padding: 3px 7px;
  color: #FF4A3F;
  background: #E7E7E7;
  font: 500 16pt calibri;
  transform: scale(1, 0.95);
}
.selected {
  background: #353553;
  color: white;
}

<button>Home</button>
<button>Admission</button>
<button>Results</button>
<button>Curriculum</button>
<button>Contact us</button>