Почему не отрабатывает onclick событие?

Question

let btn = document.querySelectorAll('.btn');

let text = document.querySelector('.text');


btn.onclick = function () {
    text.style.opacity = '20';
  console.log('test');
}

<div class="test-btn">
  <button class="btn">test 1</button>
  <button class="btn">test 2</button>
  <button class="btn">test 3</button>
  <button class="btn">test 4</button>
</div>

<div class="text">
  скрытый текст
</div>

Answer 1

Ну это же не jQuery. Коллекция элементов требует перебора для постановки слушателя события.

let btns = document.querySelectorAll('.btn');

let text = document.querySelector('.text');


btns.forEach(btn=>btn.onclick = function (e) {
    text.style.opacity = 0.2;
  console.log(e.target.textContent);
});

<div class="test-btn">
  <button class="btn">test 1</button>
  <button class="btn">test 2</button>
  <button class="btn">test 3</button>
  <button class="btn">test 4</button>
</div>

<div class="text">
  скрытый текст
</div>

БЛОГ НА HUSL

Почему не отрабатывает onclick событие?

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