なぜonclickが動作しないのですか？

Question

var btn = document.querySelectorAll('.button'); 

function test() { 
    alert('hello') 
} 


btn.addEventListener("click", test); 

"ボタン"をクリックした後に - test関数を呼び出す必要がありますが、そうではありません。

Answer 1

'.button'は、 'button'という名前のクラスを持つすべての要素を検索します。ボタン要素を検索する場合は、次のように記述します。document.querySelectorAll（ 'button'）

さらに、querySelectorAllはnodeListを返します。このコードの場合 ：あなたはそれが配列である見ることができるよう

<button id="myBtn">Try it</button> 
<button id="myBtn2">Try it</button> 
<script> 
    var btn = document.querySelectorAll('button'); 
    console.log(btn); 
</script> 

リターンは、NodeListの[ボタン＃のmyBtnです、ボタン＃のmyBtn2]となります。

Answer 2

document.querySelectorAllは要素のリストを返します。個々の要素にクリックイベントを適用するには が必要です。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

var btn = document.querySelectorAll('.button'); 
 
console.log(btn[0]); 
 
function test() { 
 
    alert('hello') 
 
} 
 

 

 
btn[0].addEventListener("click", test);

<div class = 'button'>Button</div>