getElementsByClassNameでの取得が上手くいかない

Question

前提・実現したいこと

マップ画像をクリックすると画像がポップアップで表示され、ベースとなる地図の上に現在地を示した画像をレイヤー状に重ねて表示したいです。
ベースとなるマップ画像とレイヤー画像は両方とも動的に設定する必要があります。
ポップアップのため使用しているプラグイン「Lity」では同時に2枚の画像を表示できないため、ベースのマップは背景として表示することを想定しています。
getElementsByClassNameで背景を設定したいターゲットが取得ないのですが、どの部分が問題なのか分からず困っています。

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

modul.js?ver=5.7.1:14 Uncaught TypeError: Cannot read property 'style' of undefined
    at HTMLAnchorElement.<anonymous> (modul.js?ver=5.7.1:14)
    at HTMLAnchorElement.dispatch (jquery-3.5.1.min.js?ver=5.7.1:2)
    at HTMLAnchorElement.v.handle (jquery-3.5.1.min.js?ver=5.7.1:2)

該当のソースコード

$(document).ready(function(){
  $("#map").click(function(){
      var map_base = $("#map_base").attr('src');
      var map_layer = $("#map_layer").attr('src');
      $("#map").attr("href", map_layer);
        var element = document.getElementsByClassName('lity-content')[0];
        element.style.backgroundImage = 'url('+ map_base +')'; 
        element.style.backgroundSize = 'cover';
      }
  });
});

試したこと

・elementをconsole.logで表示させようとすると「undefined」と出てしまいます。
・開発者ツールのconsoleに直接「document.getElementsByClassName('lity-content')[0]」と入れると取得できました。

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

ポップアップ表示にはjQueryプラグイン「Lity」を使用しています。

Answer 1

.lity-container ですが、公式のデモを見る限りですと、モーダルを開くまで存在しないみたいです。
ですので、$("#map").click()の処理がされる前に、Lity のモーダルを開く処理が終わっていないといけないのではないかな、と思います。

公式ドキュメントにあるようにイベントを拾ってみてはどうでしょうか。

$(document).on('lity:open', function(event, instance) {

console.log('Lightbox opened');

});
GitHub - jsor/lity: Lightweight, accessible and responsive lightbox.

Comments

[harami_]

clickイベントを教えていただいたイベントに書き換えたら問題なく表示されました！
大変助かりました。ありがとうございます。

[Lhankor_Mhy]

お役に立てたようで何よりです。

Answer 2

マップ画像をクリックすると画像がポップアップで表示され

表示される前に当該のイベントが実行されてしまっているのではないでしょうか？

Comments

[harami_]

仰る通りで実行タイミングを変えたら解決しました。
ありがとうございました。