javascriptで複数の要素に対して同様のイベントを発生させたいがイベントが発生しない（モーダルウィンドウの例）

Question

//クリックした時にモーダルが展開するトリガーとなる要素の取得
let modalTrigger = document.getElementById("modal-open");
//上記で取得した要素のdata属性を取得
let modalData = modalTrigger.dataset.target;
//上記で取得したdata属性の内容と一致するidを持つ要素（当該モーダルの内容）を取得
let modal = document.getElementById(modalData);

let modalOpen = function() {
  modal.classList.remove("--hidden");
  modal.classList.add("--visible");
}

modalTrigger.addEventListener('click', modalOpen);

javascriptを使用してモーダルウィンドウを製作しています。
流れとしては

1. モーダルが展開する要素をクリック
2. data属性を取得
3. その内容と一致するidの持つ要素（モーダル部分）が展開される

のような流れで製作したのですが上手く動きません。

また、クリックイベントのターゲットとなる要素を（> let modalTrigger = document.querySelectorAll(".modal-open");）
で指定したのですが

for (let i = 0; i < modalTrigger.length; i++) {
modalTrigger[i].addEventListener('click', alerts);
}

と記述してもクリックイベントがすべての要素に適応されるどころか、クリックベントが発生しません。

複数の要素に対して同じクリックイベントを発生させるにはどのようにしたほうがよろしいでしょうか？
また、モーダルウィンドウの制作にあたってもっと良いやり方などがあればご教授お願いいたします。

Comments

[kei344]

HTMLを含めたコード全体をコードブロックで追記することをお勧めします。

[storm3]

質問が２つあるので、次回からはどちらかに絞ってそれが解決したらもうひとつ質問を別でしたほうがよいです。
①モーダルウィンドウが動かない
②for文でクリックイベントがすべての要素が適応されない

まず、どこまで思った通りに動いているかを教えてください。
ブラウザのデベロッパーツール（F12で開くやつ）にエラーがでていないかどうか。
またエラーが出ていない場合は、console.log()を埋め込んでどこまで思った通り動いているかを確認してみてください。

コードを観た感じクラス名が--hedden、--visibleとなっている個所以外は問題なさそうなので、単純にjavascriptを実行するタイミングがタグの描画より早いだけではないでしょうか？

Answer 1

下記のコードからすると、複数の要素に同じidを指定して取得しようとしている様に見えます。

let modalTrigger = document.getElementById("modal-open");

JavaScriptでは同じidが複数あっても最初の１つしか取得できません。
（console.logでmodalTriggerを見ても1つしか取れていないと思います。）

基本的には、同じ名前のidは1ページ中に1つです。

idではなくdata属性またはclassに変更し、
querySelectorAllを使ってNodeListで取得すればいいと思います。