@User782
Кратко о себе

Как добавить класс при клике на чистом javascript?

Как добавить класс при клике на чистом javascript?
Есть два div
<div class="one"></div>
<div class="two"></div>


Как на чистом javascript сделать, чтобы при клике на первый div ко второму div добавился класс "three"?
И при повторном нажатии этот класс удалялся?
  • Вопрос задан
  • 5513 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
const buttonSelector = '.one';
const contentSelector = '.two';
const className = 'three';

Сколько таких пар элементов? Если одна:

document.querySelector(buttonSelector).addEventListener('click', () => {
  document.querySelector(contentSelector).classList.toggle(className);
});

Несколько:

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const index = [...document.querySelectorAll(buttonSelector)].indexOf(button);
    document.querySelectorAll(contentSelector)[index].classList.toggle(className);
  }
});

// или

const buttons = document.querySelectorAll(buttonSelector);
const contents = document.querySelectorAll(contentSelector);

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  const index = Array.prototype.indexOf.call(buttons, e.currentTarget);
  contents[index].classList.toggle(className);
}
Ответ написан
Комментировать
@h88p
Pre-Junior HTML Developer
document.querySelector('.one').addEventListener('click', _=> {
	document.querySelector('.two').classList.toggle('three');
})
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы