Как получить содержимое элемента с помощью this

Question

Предположим у меня есть группа элементов с одинаковыми классами, как получить содержимое элемента при клике по нему, я так понимаю эту задачу можно решить с помощью this, но я не знаю как, дело в том что заранее не известно количество элементов с одинаковыми классами а значить устанавливать для каждого элемента уникальное id не возможно. Заранее спасибо

Вот пример разметки

<div class="form_switch">
    Пункт 1
</div>

<div class="form_switch">
    Пункт 2
</div>

<div class="form_switch">
    Пункт 3
</div>

<div class="form_switch">
    Пункт 4
</div>

<div class="form_switch">
    Пункт 5
</div>

<div class="form_switch">
    Пункт 6
</div>

<div class="form_swich">
    Пункт 7
</div>

Answer 1

По поводу this в обработчиках событий можно почитать тут: Введение в браузерные события.

Но чтобы не навешивать обработчики на все элементы, лучше использовать делегирование событий и для этого поместить элементы в контейнер (если они ещё не в подходящем для этого элементе).

document.querySelector('#switches').addEventListener('click', function(event) {
  const target = event.target;

  if (target.className !== 'form_switch') return;

  console.log(target.innerText);
});

<div id="switches">

  <div class="form_switch">
    Пункт 1
  </div>

  <div class="form_switch">
    Пункт 2
  </div>

</div>

Answer 2

Без добавления id-шников

document.querySelectorAll('.form_switch').forEach(form_switch => {
    form_switch.addEventListener('click', e => {
        console.log(form_switch.innerHTML);
    });
});

<div class="form_switch">
    Пункт 1
</div>

<div class="form_switch">
    Пункт 2
</div>

<div class="form_switch">
    Пункт 3
</div>

<div class="form_switch">
    Пункт 4
</div>

<div class="form_switch">
    Пункт 5
</div>

<div class="form_switch">
    Пункт 6
</div>

<div class="form_swich">
    Пункт 7
</div>

БЛОГ НА HUSL

Как получить содержимое элемента с помощью this

Ответы (2 шт):