javascript　追加した要素へaddEventListenerを追加する方法

●やりたい事
1.Div要素(id=test") の子要素にDiv要素(id=test2")を追加
2.上記1で追加したDiv要素(id=test2")にSpan要素(値:a〜e、id:id-a〜id-e)追加
3.上記2で追加したspan要素にaddEventListenerにてclickイベント追加
4.Div要素(id=test2")に上記span要素を一覧表示
5,上記2.3.4をfor文にて繰り返す
6.表示span要素をクリックしalert表示
例:aボタンをクリックするとalertにてaを表示
:bボタンをクリックするとalertにてbを表示

●質問内容
Div要素(id=test2")に上記span要素は表示されますが、span要素をクリックしてもalert表示されません。
console.log(getSpanid)にてspan要素に"id"値と"value"値が追加されたことは確認出来たのですが、addEventListenerが追加されたか確認方法が分からず、質問させていただきました。

この場合どの様に修正すれば、上記6を実行することが出来るのでしょうか？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
</head>
<body>

  <div id="test"></div>

  <script>

    const arry= ["a","b","c","d","e"];

    displayText();
    function displayText(){

      let getDivid = document.getElementById("test");

      //div要素作成
      let createDiv = document.createElement("div");
      let newDivid = "test2";
      createDiv.setAttribute("id",newDivid);
      getDivid.appendChild(createDiv);
      
      let getNewDivid= document.getElementById(newDivid);
      //作成したdiv要素にspan要素を追加
      for (let i = 0; i < arry.length; i++) {

        let createSpan = document.createElement("span");
        let spanid= "id-" + i ;
        createSpan.setAttribute("id",spanid);
        createSpan.setAttribute("value","ボタン");
        getNewDivid.appendChild(createSpan);

        
        //追加したspan要素にclickイベント追加
        let getSpanid= document.getElementById(spanid);
        let btn= getSpanid.getAttribute("value");
        getSpanid.addEventListener('click',function(){
          alert(arry[i]);
        },false);

        console.log(getSpanid);

        //追加したspan要素一覧表示
        getNewDivid.innerText += arry[i] + btn +"\n";
      }
    }

  </script>
  </body>
</html>

m.ts10806

2020/03/23 23:58

spanじゃなくdivとかのブロック要素にした場合はどうでしょうか

行動規範の内容に同意します

回答5件

getNewDivid.innerText += arry[i] + btn +"\n";

だとdivに機能の無いテキストを追加しているだけになってしまっているのでこれは消して

作ったspanには中身のテキストが無いのでクリック判定が無いので
createSpanを作っている場所で

createSpan.textContent = "ボタン" + arry[i];

を入れればよさそうかも

投稿2020/03/24 00:35

q_sane_q

総合スコア610

ベストアンサー

大抵のブラウザなら、F12キーを押すことで開発者用のツールを起動できます。
例えば、google chrome で見た場合は以下のような画面が出ます。

[Elements] タブで HTML の構造を確認したところ、そもそも span が追加できていないようです。
div に span を追加する処理を見直してみてください。

また、google chrome の場合は、[Elements]-[Event Listeners] の画面でイベントリスナーの一覧が確認できます。

例えば、id="test2" の div に click イベントが追加されているなら、以下のように表示されます。

ここに span があるかどうかで、上手くイベントが追加出来ているかどうかの確認ができます。

今回は google chrome で説明しましたが、他のブラウザにも似たような機能はあると思いますので、調べてみると、今後の開発がはかどると思います。

投稿2020/03/24 00:32

shinoharat

総合スコア1685

shinoharat

2020/03/24 00:35

補足です！ > 例えば、id="test2" の div に click イベントが追加されているなら、以下のように表示されます。と書きましたが、これは私が説明のために追加したイベントです。質問者さんの javascript だと [Event Listeners] は空っぽでした。

行動規範の内容に同意します

そもそもイベント無しにして登録してるからでは？

getNewDivid.innerText += arry[i] + btn +"\n";

投稿2020/03/24 00:03

退会済みユーザー

総合スコア0

すでに他の方の回答でも指摘しているように、span要素を生成追加してから、

getNewDivid.innerText += arry[i] + btn +"\n";

でテキストで上書きしてしまってますので、span要素が消えてしまいます。
まずはこれを削除しましょう。

さらにspan要素の中身がないので、高さ0 幅0 になりクリックできません。span要素にテキストを追加しましょう。
createSpan.textContent = "ボタン" + arry[i];

あと、要素生成後に、getElementByIdで取得しなおしてますが、無駄な処理ですね。
生成したものを直接使えばシンプルに記述できまず。

js
1const arry= ["a","b","c","d","e"];
2
3displayText();
4function displayText(){
5
6  let getDivid = document.getElementById("test");
7
8  //div要素作成
9  let createDiv = document.createElement("div");
10  createDiv.id = "test2";
11  getDivid.appendChild(createDiv);
12
13  let getNewDivid= createDiv;
14  //作成したdiv要素にspan要素を追加
15  for (let i = 0; i < arry.length; i++) {
16
17    let createSpan = document.createElement("span");
18    createSpan.id = "id-" + i;
19    createSpan.value = "ボタン";
20    createSpan.textContent = "ボタン" + arry[i];
21    createDiv.appendChild(createSpan);
22
23    //追加したspan要素にclickイベント追加
24    createSpan.addEventListener('click',function(){
25      alert(arry[i]);
26    },false);
27
28    console.log(createSpan);
29
30  }
31}