文字列にaddEventListenerしたい

JavaScriptの文字列にaddEventListenerしたいです。
正確には、文字列をなにかに変換して、addEventListenerしたいというべきでしょうか・・・。

HTMLは以下です。

html
1<div id="abc1">ボタン</div>

上記のabc1にJavaScriptでaddEventListenerするには、以下でできましたが、

javascript
1// 正常に動く
2abc1.addEventListener("click", callback);

以下のように、abc1の「1」を変数として扱ったうえで、addEventListenerする方法がわかりません。
strをなにかに変換すればよいのでしょうか。

javascript
1let i = "1";
2let str = "abc" + i;
3// 以下ではだめ
4str.addEventListener("click", callback);

以下のようなHTMLがあって、以下のすべてにaddEventListener("click", callback);を適用したい、ということです。
以下はabc3までですが、abc10まで増えたりもします。

教えて頂けると幸いです。

退会済みユーザー

2020/07/18 04:00

そもそも何がしたいのか書きませんか？　str.addEventListener("click", callback); では逆立ちしても動くはずはないし、議論しても意味がないのですけど・・・例えば、div 要素が複数あって、その i 番目の要素にリスナをアタッチしたいというようなことなんですか？

torimingo

2020/07/18 04:05

以下のようなHTMLがあって、以下のすべてにaddEventListener("click", callback);を適用したい、ということです。以下はabc3までですが、abc10まで増えたりもします。 <div id="abc1">ボタン</div> <div id="abc2">ボタン</div> <div id="abc3">ボタン</div>

退会済みユーザー

2020/07/18 04:27 編集

質問欄を編集して上記のことを追記してください。同様な質問を最近 Teratail でも見ました。ググって調べると見つかると思いますのでやってみましょう。それで自己解決できるときっとうれしくて満足度が上がる思います。

torimingo

2020/07/18 04:30

ググって、以下のような方法だとできませんでした・・・もう少し調べてみます。ありがとうございました。 let t = document.createElement('div'); t.innerHTML = "abc" + i; t.addEventListener("click", callback);

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

回答2件

「addeventlistener 複数の要素」などをキーワードにググってみましょう。いろいろ参考になる記事がヒットするはずです。例えば下記：

[JS] イベントリスナを複数要素にまとめて登録する方法
https://mo2nabe.com/listener-add-to-elements/

自分でもやってみて、自分のケースに合う記事を探してみてください。

投稿2020/07/18 04:35

退会済みユーザー

総合スコア0

torimingo

2020/07/18 04:39

ご回答ありがとうございます。 getElementByIdが肝なんですね。

退会済みユーザー

2020/07/18 04:51 編集

> getElementByIdが肝なんですねいえ、それではないです。id は html ソース全体で一意になるようにするので、それを使うと対象の複数の div 要素の数（10 個あれば 10 回）だけ getElementById ... addEventListener を書かねばなりません。質問では「abc10まで増えたりもします」とのことなので、対象の div の数は不定で減ったり増えたりするということと理解しています。なので、getElementById は適してないかと。紹介した記事のように同じクラス名を付与して getElementsByClassName で対象の複数の div 要素を一度に取得し、forEach などループを使って addEventListener するのがよさそうです。

torimingo

2020/07/18 05:07

詳細な説明をありがとうございます。 idではなく、classを使用したほうがいいということですね。勉強になりました！

退会済みユーザー

2020/07/18 05:15

ケースバイケースです。今回のケースでは div 要素の数（10 個あれば 10 回）だけ getElementById ... addEventListener を書くのは得策ではないというだけです。もし、どの div 要素がクリックされたかをリスナで分かるようにして、クリックされた div 要素によって処理を変える等が必要とかいうことになってくると、また話は変わってくるかもしれません。

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

ベストアンサー

こういう感じでしょうか？

html
1<html>
2    <head>
3    </head>
4    <body>
5        <div id="abc1">ボタン1</div>
6        <div id="abc2">ボタン2</div>
7        <div id="abc3">ボタン3</div>
8        <br>
9        <div id="xyz1">button1</div>
10        <div id="xyz2">button2</div>
11        <div id="xyz3">button3</div>
12
13        <script>
14            function callback(e) {
15                alert("clicked" + JSON.stringify(e));
16            }
17
18            document.getElementById('abc1').addEventListener("click", callback);
19            document.getElementById('abc2').addEventListener("click", callback);
20            document.getElementById('abc3').addEventListener("click", callback);
21
22            for (let i = 1; i < 10; i++) {
23                let name = "xyz" + i;
24                let element = document.getElementById(name);
25                if (element != undefined) {
26                    element.addEventListener("click",callback);
27                } else {
28                    // 存在しない要素名
29                }
30            }
31        </script>
32    </body>
33</html>