javascript for文で生成した最初の要素にしか、addEventListenerが効かない。

Question

現在三択クイズををjsで作っており、html要素もfor文で生成しています。
しかし、addEventListenerをつけてイベントが発生するのが、for文で生成した1つ目の要素（"たかなわ","こうわ","たかわ"）をクリックしたときだけです。
他のfoe文で生成したものにもイベントをつけたいのですが、解決策があれば教えていただきたいです。

Javascript
コード
      
      'use strict';
      {        
        //配列
        const quizeSet = ([
          ["たかなわ","こうわ","たかわ"],
          ["かめいど","かめど","かめと"],
          ["こうじまち","おかとまち","かゆまち"],
          ["ごせいもん","おなりもん","おかどもん"],
          ["とどろき","たたりき","たたら"],
          ["せきこうい","いじい","しゃくじい"],
          ["ざっしょく","ざっしき","ぞうしき"],
          ["みとちょう","おかちまち","ごしろちょう"],
          ["ろっこつ","ししぼね","しこね"],
          ["こぐれ","こばく","こしゃく"],
        ]).map(shuffle);
        
        
        //配列の中身をシャッフルする
        function shuffle(arr) {
          for (let k = arr.length - 1; k > 0; k--) { // i = ランダムに選ぶ終点のインデックス
            const j = Math.floor(Math.random() * (k + 1));  // j = 範囲内から選ぶランダム変数
            [arr[j], arr[k]] = [arr[k], arr[j]]; // 分割代入 i と j を入れ替える
          }
          return arr;
        }
        
        //ループさせる
        for(let i = 0; i < quizeSet.length; i++){
          let h = '<div class="container" id="container">'
          + '<div class="box" id="box">'
          + '<p class="title" id="title">'
          +`${i + 1}.この地名はなんて読む？`
          +'</p>'
          + `<img src="./img/${[i]}.png">`   //変数iを埋め込む
          + '</div>'
          + '<div class="btn" id="btn">'
          + '<ul id="ul">'
          + `<li id="li1">${quizeSet[i][0]}</li>`
          + `<li id="li2">${quizeSet[i][1]}</li>`
          + `<li id="li3">${quizeSet[i][2]}</li>`
          + '<div  id="target">'
          + '<p id="success" ></p>'
          + '<p id="successText"></p>'
          + '</div>'
          + '</ul>'
          + '</div>'
          + '</div>';

          document.write(h);  
        };
          
          
          
          //定数
          //li
          const li1 = document.getElementById("li1");
          const li2 = document.getElementById("li2");
          const li3 = document.getElementById("li3");
          //ul
          const ul = document.getElementById("ul");
          //  target
          const target = document.getElementById("target");
        //  success
        const success = document.getElementById("success");
        //  successText
        const successText = document.getElementById("successText");
        
        const successNode1 = document.createTextNode('正解!');
        const successNode2 = document.createTextNode('正解は「たかなわ」です!');
        const falseNode1 = document.createTextNode('不正解!');
        const falseNode2 = document.createTextNode('正解は「たかなわ」です!');
       

        function noClick() {
          li1.classList.add("pointer-events")
          li2.classList.add("pointer-events")
          li3.classList.add("pointer-events")
        }

        //クリックしたときの動作
        li1.addEventListener("click",() => {
          li1.classList.add("color-blue")
          noClick();
          
          target.classList.add("target");
          success.appendChild(successNode1);
          success.classList.add("success");
          successText.appendChild(successNode2);
          
        });
        
        li2.addEventListener("click",() => {
          li2.classList.add("color-red")
          li1.classList.add("color-blue")
          noClick();

           
          target.classList.add("target");
          success.appendChild(falseNode1);
          success.classList.add("false");
          successText.appendChild(falseNode2);
        });
        
        li3.addEventListener("click",() => {
          li3.classList.add("color-red")
          li1.classList.add("color-blue")
          noClick();
          
          target.classList.add("target");
          success.appendChild(falseNode1);
          success.classList.add("false");
          successText.appendChild(falseNode2);
        });
    };  

Answer 1

非常によく出る問題というか、質問の部類なのですが、「id」はその名の通り特定できる要素であることが保証されます。
forでループさせているということはその数ぶんだけ要素が生成されているということになります。
先に書いたように「特定する」ので1つしかgetしてきません。
htmlとしての正規化も必要ですし、複数の要素にイベント附与したいのでしたら、要素のぶんだけイベントをaddする必要があります。
classをつけるべきですね。

Comments

[m.ts10806]

あとdocument.write()は推奨されない機能なのでappendとかinnerHTMLとかで要素を追加してください。

Answer 2

画像を参照して質問をだすならquizeSet にidが必要だと思います
また答え合わせまでするなら回答のいずれかに正解番号が必要です

Comments

[daikiii]

回答ありがとうございます！