1

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? Объясните, пожалуйста, в чем моя ошибка, я не понимаю

1
  • 3
    listBtn.classList.toggle("change"); => this.classList.toggle("change"); манипуляции с классом проводить надо у текущего эл-та, а вы делали это для списка нод (listBtn - список всех выбранных эл-тов)
    – InDevX
    28 мар в 16:17

2 ответа 2

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>

0

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.