LoginSignup
@tan__pop (真帆 外山)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Javascriptの画像のポップアップ表示について

Q&A

JavaScript

解決したいこと

プログラミング超初心者です。
趣味の自作サイトを作っているのですが、何枚か画像を載せていて、画像のポップアップ表示が最初の一枚にしか効かないということで困っています。

該当するソースコード

// ポップアップのセッティング処理
function popupSetting(selectObject){
    let popup = document.getElementById('popup');
    if(!popup) return;


    let bgBlack = document.getElementById('bg-black');
    let closeBtn = document.getElementById('close-btn');
    let showBtn = document.getElementById('contents-item');
  
    // ポップアップ
    popUp(bgBlack);
    popUp(closeBtn);
    popUp(showBtn);
  
    // ポップアップ処理
    function popUp(elem){
      if(!elem) return;
    
      elem.addEventListener('click', function(){
        popup.classList.toggle('is-show');
      });
    }
  }
  
  // ポップアップのセッティング
  popupSetting();

自分で試したこと

今回はサンプルコードを使わせていただきましたが、画像が15枚ある家最初の一枚しかポップアップ表示ができません。
恐らく繰り返し処理ができていない問題なのでしょうが、if(!popup)return;とif(!elem)return;が何を表すのか、この部分を変更すればよいのかそれともfor文を加えれば良いのか不明です。回答よろしくお願いします。

0 likes

4Answer

OyaTomo
@OyaTomo
if (!popup) {
    return
}

これはpopup変数がnullの時に、その関数の実行を終わらせるという意味です。

1Like

Comments

  1. @OyaTomo

    　HTMLのIdは重複してはいけないため、getElementByIdでは要素が一つしか取得されないからです。
    　たくさんの写真を取得する場合は、classを割り当ててgetElementsByClassName()で配列を取得しましょう。
    　その配列の要素一つ一つにポップアップ処理をすればよいのではないでしょうか？
tan__pop
@tan__pop

回答ありがとうございます。getElementByIdの部分を、getElementsByClassNameに書き換えれば良いでしょうか？

0Like

Comments

  1. @tan__pop

    Questioner

    >その配列の要素一つ一つにポップアップ処理をすればよいのではないでしょうか？

    // ポップアップ
    popUp(bgBlack);
    popUp(closeBtn);
    popUp(showBtn);

    // ポップアップ処理
    function popUp(elem){
    if(!elem) return;

    elem.addEventListener('click', function(){
    popup.classList.toggle('is-show');
    });
    }
    }

    の部分を書き換えて、forを使ったほうが良いでしょうか？

    このままだと、検証ツールでUncaught TypeError: document.getElementByClassName is not a function　
    と出ます。

Comments

  1. @tan__pop

    Questioner

    そうでしたね;
    修正しました。ご指摘ありがとうございます。

  2. @tan__pop

    Questioner

    他サイトを参考に


    // ポップアップのセッティング処理
    function popupSetting(selectObject){
    let popup = document.getElementsByClassName('popup');
    if(!popup) return;


    let bgBlack = document.getElementsByClassName('bg-black');
    let closeBtn = document.getElementsByClassName('close-btn');
    let showBtn = document.getElementsByClassName('contents-item');

    // ポップアップ


    for (let i = 0; i < popup.length; i++) {
    popup[i].onclick = function() {
    $img.src = this.src;


    popUp(bgBlack);
    popUp(closeBtn);
    popUp(showBtn);
    }
    }


    // ポップアップ処理
    for (let i = 0; i < popup.length; i++) {

    function popUp(elem){
    if(!elem) return;

    elem.addEventListener('click', function(){
    popup.classList.toggle('is-show');
    });
    }
    }
    }

    // ポップアップのセッティング
    popupSetting();

    と書いてみました。エラーは出ませんが、ポップアップ処理が反映されません。
OyaTomo
@OyaTomo

どのようなポップアップ処理をされているのか具体的にわからないのでお答えしかねます。
せめてご覧になった他の記事を教えてください。

0Like

Comments

  2. @OyaTomo

    記事を見ましたが記事の実装で特に問題はないと思いますよ。
    記事の写真が多いバージョンで作ればよろしいのではないでしょうか？

  3. @tan__pop

    Questioner

    確かにそうですよね！
    ありがとうございます！やってみます。

Your answer might help someone💌

LoginSign Up