Why doesn't it work onclick?

[Analeea]

Why doesn't it work onclick?

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>

[obi]

It's not jQuery. The component shall be retracted to display the event listener.

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>