Цвет текста не меняется с помощью JS кода

Question

let listBtn = document.querySelectorAll(".block__text");

for (element of listBtn) {
  element.addEventListener("click", function () {
    listBtn.classList.toggle("change");
  });
}

console.log("success");

.block__text.change {
  color: pink;
}

<div class="block">
  <p class="block__text">Раз</p>
  <p class="block__text">Два</p>
  <p class="block__text">Три</p>
  <p class="block__text">Четыре</p>
</div>

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

Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')

Как я понял, код не может прочитать свойства значения undefined? Объясните, пожалуйста, в чем моя ошибка, я не понимаю

Answer 1

const blockTextNodes = document.querySelectorAll(".block__text");

for (const blockTextNode of blockTextNodes) {
  blockTextNode.addEventListener("click", function () {
    blockTextNode.classList.toggle("block__text_change");
  });
}

.block__text_change {
  color: pink;
}

<div class="block">
  <p class="block__text">Раз</p>
  <p class="block__text">Два</p>
  <p class="block__text">Три</p>
  <p class="block__text">Четыре</p>
</div>

Answer 2

Используйте в обработчике события ссылку на сам элемент события с помощью this :

let listBtn = document.querySelectorAll('.block__text');

for (element of listBtn) {
  element.addEventListener('click', function() {
    this.classList.toggle('change');
  });
}

.block__text.change {
  color: pink;
}

<div class="block">
  <p class="block__text">Раз</p>
  <p class="block__text">Два</p>
  <p class="block__text">Три</p>
  <p class="block__text">Четыре</p>
</div>

БЛОГ НА HUSL

Цвет текста не меняется с помощью JS кода

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