JavaScript 同じIDでaddEventListenerを扱うには？

Question

やりたい事

addEventListenerでIDが同じ物があっても反応させたい
下記コードの表示1、表示2、表示3のどれを押しても「クリックされました！」と出したいのですが、同じIDを付けると一つしか反応しなくなります
同じIDで反応させる方法はありますでしょうか？

<button id="btn">表示1</button>
<button id="btn">表示2</button>
<button id="btn">表示3</button>

<script>
    var btn = document.getElementById('btn');
     
     
    btn.addEventListener('click', function() {
      
        alert('クリックされました！');
      
    }, false);
</script>

Comments

[m.ts10806]

「調べ方」からアドバイスしたほうがよろしいのでしょうか。
過去に同じ問題に直面した人がゼロと思えるかどうかの観点を持ちましょう

Answer 1

同じIDで反応させる方法はありますでしょうか？

そもそも論として、HTML内に同じIDの要素を複数作ってはいけません。

Answer 2

同一ページに同一IDは存在してはいけないというルールがあります。
「ID」なので、日本におけるマイナンバーのように特定できなければなりません。

複数の要素に同じイベントを与えたいのであれば、classを振りgetElementsByClassNameで要素を取得しループしてそれぞれにeventをaddするのがセオリーです。

querySelectorAll()を使う方法もありますが、いずれにしても調べると結構出てくる情報です。

Answer 3

※他の全ての回答も合わせてご確認ください（共通する指摘を回答させていただきます）。

同じIDで反応させる方法はありますでしょうか？

ないです。

idより
id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク (フラグメント識別子を使用)、スクリプト、スタイル (CSS を使用) で要素を特定することです。

---

まず「IDが同じ物があっても（HTML文書内でid属性を重複して書ける）」という考えが誤りです。
ブラウザの実装上、誤った記述でも動作する例はあるかもしれませんが、ルールに厳格な実行環境では使えません。

これを機に、一意（重複禁止） という規則を意識するようにしてください。

Answer 4

クラスでやるかカスタムでデータでdata-id的な処理をするか
処理的にはquerySelectorAllで回して処理するか
親ノードにイベントをセットしてターゲットノードの属性をしらべるか

Comments

[yambejp]

おなじidは使ってはいけませんが、回答の後者をつかえば反応はします
（繰り返しますがこの方法はだめです）

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#parent').addEventListener('click',e=>{
if(e.target.id=="btn") console.log('click');
});
});
</script>
<div id="parent">
<button id="btn">表示1</button>
<button id="btn">表示2</button>
<button id="btn">表示3</button>
</div>