addEventListenerが動かない

Question

プログラミング初心者です・・・

javascriptで数字をタッチするゲームを作ろうとしています。
startボタンを押すと数字がランダムに表示されるところまでは作りました。
その後、li要素で作った数字をクリックした後の機能を作ろうとしたのですが、
li.addEventListenerとしてもliがanyとなり取得できません。

調べたところ関数の中の変数は他の関数では呼び出すことができないというのを目にしました。
そこでPUSH()の中でliのクラスリストにbtnというのを追加し、btn.addEventListenerで動かそうとしても動かないです。

どなたかご教授お願い致します。

'use strit'
{
const start = document.getElementById('start');
const ul= document.querySelector('ul');
let PassCount = 0;
let suji = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
const timer = document.getElementById('timer')



function push(){
    for(i=0; i<16; i++){
      var li = document.createElement('li');
      ul.appendChild(li);
      li.textContent = suji.splice(Math.floor(Math.random()*suji.length), 1)[0];
      li.classList.add('btn')  
    }
   
}


function timerStart(){
  PassCount = 0;
  PassCountId = setInterval('showCount()',1000) ;
  let correct = true;
}

function showCount(){
  PassCount++;
  timer.textContent = `${PassCount}秒経過`
}


start.addEventListener('click',()=>{
  while (ul.firstChild) {
  ul.removeChild(ul.firstChild);
  }
    timerStart();
    showCount();
    push();
});



const btn = document.getElementsByClassName('btn');

btn.addEventListener('click',(){



});

Answer 1

getElementsByClassNameは、
HTMLCollectionが取得されるため、
その変数に直接イベントを付与することはできません。
要素を一個一個とりだして、それに対してイベントを付与する必要があります。

const btn = document.getElementsByClassName('btn');

// HTMLCollectionを、配列として、全走査する
[].forEach.call(btn, e => {
  e.addEventListener('click', () => {
    // 処理
  });
});

Comments

[kenji.jpc]

丁寧な回答ありがとうございます。
要素一つ一つにイベントを設定する必要があるという事なのですね。

[].forEach.call(btn, e => {
e.addEventListener('click', () => {

このコードでもaddEventListenerがanyとなってしまうのですがどこを修正したらいいのでしょうか。

もしよろしければ、教えていただきたいです。

[miyabi_pudding]

それは、
要素が入る前に実行しているからです。
push関数を実行して初めて、
.btn要素が生成されますが、
そのpush関数は、他要素のクリックで初めて実行される構文になっています。

ルートに書いた構文は、当然、関数の中身より先に実行されるため、
クリックで改めて生成させては後の祭りってことです。

[kenji.jpc]

ありがとうございます。
つまり、クリックすることによってpush関数が作動するので、そのままでは生成されていないのでエラーになってしまうという解釈でよろしいでしょうか？

[miyabi_pudding]

そうです。
ルートで書いた処理は、最初に全部実行される、
関数の中身は、関数を実行するまで中の処理は反映できない、
と覚えとくといいかと。

[kenji.jpc]

なるほど、理解できました。
ありがとうございます。

では、この場合li要素に対してイベントを設定するためには、既存のli要素に対してイベントを設定すればよいのでしょうか？
しかし、liをpush関数の中で定義しているため、他では使えないと思うのですが、この場合はpush関数の中身事変えてstartを押したときにliが生成されるようにした方がよいのでしょうか？

[miyabi_pudding]

いくらでもやりようがありますが、
push関数のfor中で、ulにappendChildした後次行で、
li変数にイベント付与すればいいかと。

ただし、push関数が何度も実行するようなものであれば、工夫は必要です。
（addEventListenerは重複する）

[kenji.jpc]

ありがとございます。
早速コードを書いていきたいと思います。