for文で生成した複数のidにイベントがつけられない。

Question

コード for(let i = 0; i < quizeSet.length; i++){
         
          for(var g = 0; g < 3; g++){
            h = `<li id="${i}-${g}-1">${quizeSet[i].answers[g]}</li>`;

 　　　　　　let id =  `document.getElementById("${i}-${g}-1")`
        　 console.log(id);

          }

          document.write(h);  
        };

        

　       id.addeventlisner("click",() => {
           window.alert("ok")
        });

コードの一部分しかのせていませんが、
上のようにfor文で作った30個のidにaddeventlisnerを付けたいのですが、つけることができません。
consoleで確認してみるとidは30こ取得できているようです。

質問としましては
idの取得の方法（もっといい方法があれば）と、複数のidに対するイベントの付け方を教えていただきたいです。

また、 let id = document.getElementById("${i}-${g}-1")
をfor文の外でやろうとすると、iとjが定義されてませんとエラーが出てしまいます。
for文にはスコープがないと書かれていたので、なぜこのようなエラーが出でしまうのかわかりません。

何か解決策がありましたら、教えていただきたいです

Comments

[fumu7]

[ヒントというか、問題点の指摘]

「consoleで確認してみるとidは30こ取得できているようです」というのは、
```ここに言語を入力
console.log(id);
```
というコードが30回実行されて、consoleに30行出力された事を意味しているのだと思います。

しかし、イベントを付ける対象の li要素を生成する以下のコードは、"quizeSet.length"回しか実行されません。
```ここに言語を入力
document.write(h);
```

また、イベントを付ける下記のコードは、１回しか実行されません。（forループの外に書かれているので、繰り返し実行されることはありません）
```ここに言語を入力
id.addeventlisner("click",() => {
window.alert("ok")
});
```

このコメントがプログラムの修正に役立つのではないかと思います。

Answer 1

document.writeを使っているうちはなにをやってもまともなソースはかけません

Comments

[yambejp]

動的にHTML要素をつくるならdocument自体にaddEventListener
してください
e.targetに対してclosestで条件をしぼって反応させればいいでしょう

[yambejp]

ざっくりこんな感じ

<script>
'use strict';
const quizeSet=["a","b","c"];
window.addEventListener('DOMContentLoaded',()=>{
quizeSet.map(x=>Object.assign(document.createElement('li'),{className:"fuga",id:`test-${x}`,textContent:'test'}))
.forEach(x=>document.querySelector('#hoge').appendChild(x));
});
document.addEventListener('click',e=>{
let y;
if(y=e.target.closest('.fuga')){
console.log(y.id);
}
})
</script>

<ul id="hoge">
</ul>

[daikiii]

回答ありがとうございます
試してみます！