IEでのみクリックイベントでエラーが発生しモーダルが表示されない問題

前提・実現したいこと

HTML5 Javascript にてyoutubeAPIを使用しボタンを押したら周りが暗くなりyoutubeの動画画面が浮かび上がる一般的によく見るモーダルを作成したいと思い実装してみたところ、IE11のブラウザのみうまく動いてくれませんでした。
IEのブラウザへの対応に関する知識があまりないため、解決に困り質問させていただきました。
ご存知の方がいらっしゃいまいたらよろしくお願いいたします。

発生している問題・エラーメッセージ

モーダルを開くトリガーのボタンをクリックすると、IEの開発者ツールのConsoleに以下のエラーメッセージが表示され、モーダルが開かない状態です。
chrome, edge, firefoxでは正常にモーダルが開かれその中の動画再生もできています。

未定義またはNULL参照のプロパティ'target'は取得できません

該当のソースコード

html
1
2<!--モーダルを開くボタンのコード-->
3<div class="wrap-1">
4    <p class="modal1-open">開く</p>
5</div>
6<div class="wrap-2">
7    <p class="modal2-open">開く</p>
8</div>
9
10<!--開くモーダルの部分のコード-->
11<div class="modal__mask"></div>
12        <section class="modal__section" id="modal1">
13          <div class="modal__inner">
14            <div class="modal__contents">
15              <div class="modal__youtube" id="movie-1"></div>
16              <img class="modal1-close modal__close" src="./img_modal-close.png" alt="close">
17            </div>
18          </div>
19        </section>
20        <section class="modal__section" id="modal2">
21          <div class="modal__inner">
22            <div class="modal__contents">
23              <div class="modal__youtube" id="movie-2"></div>
24              <img class="modal2-close modal__close" src="./img_modal-close.png" alt="close">
25            </div>
26          </div>
27        </section>

js
1var tag = document.createElement('script');
2    tag.src = "https://www.youtube.com/iframe_api";
3    var firstScriptTag = document.getElementsByTagName('script')[0];
4    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
5
6    //複数動画を扱いたいので動作に使用するそれぞれの要素を配列に格納
7    var ytPlayer = [];
8	var ytData = [
9    {
10        id: 'youtube1の動画ID',
11        area: 'movie-1',
12        target: '#modal1',
13        trigger: '.modal1-open',
14        close: '.modal1-close'
15    },
16    {
17        id: 'youtube2の動画ID',
18        area: 'movie-2',
19        target: '#modal2',
20        trigger: '.modal2-open',
21        close: '.modal2-close'
22    },]
23
24function onYouTubeIframeAPIReady() {
25        //動画の種類の配列をループさせプロパティを設定
26        for (let i = 0; i < ytData.length; i++) {
27            ytPlayer[i] = new YT.Player(
28                ytData[i]['area'], 
29                {
30                    width: 800,
31                    height: 450,
32                    videoId: ytData[i]['id'], 
33                    playerVars: {
34                        rel: 0,
35                        loop: 0, 
36                        videoId: ytData[i]['id'],
37                    }
38                }
39            );
40            
41            //モーダルの表示と非表示
42            $(ytData[i]['trigger']).on('click', function() {
43                $(ytData[i]['target']).fadeIn();
44                $('.modal__mask').fadeIn();
45            });
46
47            $(ytData[i]['close']).on('click', function() {
48                $(ytData[i]['target']).fadeOut();
49                $('.modal__mask').fadeOut();
50                ytPlayer[i].pauseVideo();
51            });
52
53        }
54    }
55
56    window.addEventListener('load', function() {
57        onYouTubeIframeAPIReady();
58    });

試したこと

エラー文が「//モーダルの表示と非表示」以下のコードを指していたためclickイベントに原因があると思い.click(function()やon('click',ytData[i]['target'] で試してみましたが結果変わらずでした。

補足情報（FW/ツールのバージョンなど）

検証ブラウザ：IE11
jQuery3.2.1
HTML5

kyoya0819

2020/03/06 14:09

本当にIEだけで該当の挙動が発生していますか？コードを見た感じ「target」で問題になりそうな記述は見当たりませんでしたが

gohan1go

2020/03/07 16:38 編集

はい、IEでのみ発生しています。ほかブラウザでは意図した挙動を実現できてるので記述的には間違っていないと思ったのですが、最後にIEで確認してみたところクリック後モーダルは開かずエラーが出力されるという状態です。

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

回答2件

当方所有の環境では特にエラーは発生せずに再生することができました。

（著作権とかがうるさいので色で塗りつぶしてあります。

検証用コード

HTML
1<!DOCTYPE html>
2<meta charset=UTF-8 />
3<div class="wrap-1">
4  <p class="modal1-open">開く</p>
5</div>
6<div class="wrap-2">
7  <p class="modal2-open">開く</p>
8</div>
9
10<!--開くモーダルの部分のコード-->
11<div class="modal__mask"></div>
12<section class="modal__section" id="modal1">
13  <div class="modal__inner">
14    <div class="modal__contents">
15      <div class="modal__youtube" id="movie-1"></div>
16      <img class="modal1-close modal__close" src="https://placehold.jp/150x150.png" alt="close">
17    </div>
18  </div>
19</section>
20<section class="modal__section" id="modal2">
21  <div class="modal__inner">
22    <div class="modal__contents">
23      <div class="modal__youtube" id="movie-2"></div>
24      <img class="modal2-close modal__close" src="https://placehold.jp/150x150.png" alt="close">
25    </div>
26  </div>
27</section>
28<script src=https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js></script>
29<script>
30  var tag = document.createElement('script');
31  tag.src = "https://www.youtube.com/iframe_api";
32  var firstScriptTag = document.getElementsByTagName('script')[0];
33  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
34
35  //複数動画を扱いたいので動作に使用するそれぞれの要素を配列に格納
36  var ytPlayer = [];
37  var ytData = [
38  {
39    id: 'TQ8WlA2GXbk',
40    area: 'movie-1',
41    target: '#modal1',
42    trigger: '.modal1-open',
43    close: '.modal1-close'
44  },
45  {
46    id: '-kgOFJG881I',
47    area: 'movie-2',
48    target: '#modal2',
49    trigger: '.modal2-open',
50    close: '.modal2-close'
51  },]
52
53  function onYouTubeIframeAPIReady() {
54    //動画の種類の配列をループさせプロパティを設定
55    for (let i = 0; i < ytData.length; i++) {
56      ytPlayer[i] = new YT.Player(
57      ytData[i]['area'],
58      {
59        width: 800,
60        height: 450,
61        videoId: ytData[i]['id'],
62        playerVars: {
63          rel: 0,
64          loop: 0,
65          videoId: ytData[i]['id'],
66        }
67      }
68      );
69
70      //モーダルの表示と非表示
71      $(ytData[i]['trigger']).on('click', function() {
72        $(ytData[i]['target']).fadeIn();
73        $('.modal__mask').fadeIn();
74      });
75
76      $(ytData[i]['close']).on('click', function() {
77        $(ytData[i]['target']).fadeOut();
78        $('.modal__mask').fadeOut();
79        ytPlayer[i].pauseVideo();
80      });
81
82    }
83  }
84
85  window.addEventListener('load', function() {
86    onYouTubeIframeAPIReady();
87  });
88</script>
89

コピペでお試しください。

投稿2020/03/07 17:21

編集2020/03/07 17:23

kyoya0819

総合スコア10429

gohan1go

2020/03/07 17:27

わざわざ検証までしていただきありがとうございます。なんと...動作してるんですね！後ほど別の者のPCでも試してみます。もしかしたら私のPCの環境に問題があるのかもしれません。動作確認後、またご報告させていただきます。

gohan1go

2020/03/09 02:38 編集

昨日はありがとうございました。他のPCで試したのですが、やはりうまく動作しない状態でした。その後、別で回答していただいたhwatarigさんの実装で無事動作を実現できました。原因がイマイチ理解できていないのでその点は後ほど改めて補足で書かせていただこうかと思います。迅速な回答、また貴重なお時間お使い協力いただきありがとうございました。

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

ベストアンサー

IE11でfor文の初期化にletを用いると特殊な動作をするようなので、これが原因かもしれません。

In Internet Explorer, let within a for loop initializer does not create a separate variable for each loop iteration as defined by ES2015. Instead, it behaves as though the loop were wrapped in a scoping block with the let immediately before the loop.

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let

クリックの挙動の記述をforEachで書き換えることで、IEでも動くようになるかもしれません。（再現できる環境が無いので確信が持てませんが……）

こちらの質問と回答も参考にしてください for文における、letとvarの挙動の違い

forEachに書き換えたもの

var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//複数動画を扱いたいので動作に使用するそれぞれの要素を配列に格納
var ytPlayer = [];
var ytData = [
  {
    id: "youtube1の動画ID",
    area: "movie-1",
    target: "#modal1",
    trigger: ".modal1-open",
    close: ".modal1-close"
  },
  {
    id: "youtube2の動画ID",
    area: "movie-2",
    target: "#modal2",
    trigger: ".modal2-open",
    close: ".modal2-close"
  }
];

function onYouTubeIframeAPIReady() {
  //動画の種類の配列をループさせプロパティを設定
  for (let i = 0; i < ytData.length; i++) {
    ytPlayer[i] = new YT.Player(ytData[i]["area"], {
      width: 800,
      height: 450,
      videoId: ytData[i]["id"],
      playerVars: {
        rel: 0,
        loop: 0,
        videoId: ytData[i]["id"]
      }
    });
  }

  //モーダルの表示と非表示
  ytData.forEach(function(elm,i) {
    $(elm.trigger).on("click", function() {
      console.log("open");
      $(elm.target).fadeIn();
      $(".modal__mask").fadeIn();
    });
    $(elm.close).on("click", function() {
      $(elm.target).fadeOut();
      $(".modal__mask").fadeOut();
      console.log(ytPlayer[i]);
      ytPlayer[i].pauseVideo();
    });
  })
}

window.addEventListener("load", function() {
  onYouTubeIframeAPIReady();
});

投稿2020/03/06 14:48

編集2020/03/08 02:55

hwatarig

総合スコア461

gohan1go

2020/03/07 16:33 編集

ご回答ありがとうございます。 let⇒varに変えてみたところ今度はchromeなど他全ブラウザで以下のエラーが表示されモーダルがひらかなくなってしまいました。 ``` Uncaught TypeError: Cannot read property 'target' of undefined at HTMLDivElement.<anonymous> ``` 他のスクリプト部分の影響を受けているのかと思い確認したのですが、for文を使っているのもiを定義しているのもここだけだったので原因はわかりませんでした。

hwatarig

2020/03/08 02:53

失礼しました、varではダメですね。おそらくですが、他のブラウザでvarにするとエラーになるのと同じ問題が、IEでは起きているものと思います。ので、他のブラウザでvarにしても動くように書き換えたものを貼ってみました。 asuchi0819さんの環境ではエラーが出ていないということなので環境の問題かもしれませんが……。

gohan1go

2020/03/09 02:32

上記に書いていただいたforEachのコードで試してみたところ意図した動作になりました！ありがとうございます！とりあえずこの形で実装を進めていこうと思います。ただ、原因がイマイチまだ理解できていないので落ち着いて調査したのちこちらに補足させていただこうかと思います。取り急ぎご報告させていただきました！

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

あなたの回答