JavaScript 初心者用練習課題 005 HTML要素の有無で動作を変える2

前回の課題

今回は前回の課題の拡張版で、配列の要素へのアクセスを行います。

課題用のファイル

前回の課題の結果を流用しましょう。

課題

前回の課題ではすでに画像が追加されている場合は何もしませんでしたが、

今回は、すでに追加されている画像を以下の中からランダムで更新します。

こちらと同じです)

  • https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
  • https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31
  • https://m.media-amazon.com/images/G/09/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_jp-main.CB462229751.png
  • https://www.facebook.com/images/fb_icon_325x325.png
  • https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202204031604

回答例

function addImage(){
    let imgList = [
        "https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
        "https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31",
        "https://m.media-amazon.com/images/G/09/gc/designs/livepreview/amazon_dkblue_noto_email_v2016_jp-main._CB462229751_.png",
        "https://www.facebook.com/images/fb_icon_325x325.png",
        "https://www.apple.com/ac/structured-data/images/knowledge_graph_logo.png?202204031604"
    ] // 配列で画像URLを用意

    const imgAttrName = "logo"; // 画像のname属性に利用する名前を定義
    
    let logoAry = document.getElementsByName(imgAttrName);
    //name属性がlogoのHTMLの配列を取得

    if(logoAry.length == 0) // 取得した配列の要素数で判定
    {
        // 配列の要素数が0…name属性がlogoのHTML要素がない場合の処理
        let img = document.createElement("img"); // 空のimgタグを変数として作成
        img.setAttribute("name",imgAttrName); // src属性に画像URLを設定
        img.setAttribute("src","https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"); 
        // src属性に画像URLを設定
        document.getElementById("work").appendChild(img);//idがworkのdivタグ内にimgタグを追加
    }
    else
    {
        let index = Math.floor( Math.random() * 5 ); // ランダムで0~4の数字を作成
        logoAry[0].setAttribute("src",imgList[ index ] ); // 画像URLを更新
    }
}

2~8行目に更新用の画像の配列を追加、

25~28行目に画像を更新する動作を追加しています。

getElementsByName で取得した画像(HTML要素)は配列です。

今回の例では対象が一つのため先頭の要素のみを更新の対象とするため

logoAry[0] を setAttribute します。

課題一覧