誰でもできる業務改善講座

JavaScript 初心者用練習課題 006 5個の画像URLを配列で用意し追加ボタン押下時に全て表示する

前回の課題

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

今回はループを扱います。

多くのプログラム言語の共通にして基本の要素は判断とループと変数です。

目次

課題用のファイル

6-0ダウンロード

内容説明

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 初心者用演習課題 0-0 ボタンクリック時に追加される画像を変更する</title>
  <script src="./test.js"></script><!-- JavaScriptとしてtest.jsを読み込む  -->
</head>

<body>
  <div id="work"></div> <!-- 画像追加対象のdiv -->
  <input type="button" onclick="addImage()" value="追加"><!-- JavaScriptのaddImageファンクションを起動するボタン。onclick属性でファンクションを指定 -->
</body>
</html>

test.js

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を用意
}

index.htmlを開くと「追加」ボタンが表示されます。

ボタンを押下するとaddImageは起動しますが、

配列に画像URLを用意するだけのため何も起こりません。

課題

追加ボタンをクリックしたときに配列の内容を全て表示します。

画像の表示はこれまでの課題から、

配列の全ての部分は「JavaScript 配列 ループ」などで検索するとよいでしょう。

回答例1

forEachを利用します。

forEachの中のfunctionの引数(imgURL)には個々の配列の要素が設定されます。

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を用意
    
    imgList.forEach(function(imgURL){
      let img = document.createElement("img"); // 空のimgタグを変数として作成
      img.setAttribute("src",imgURL); // src属性に画像URLを設定
      document.getElementById("work").appendChild(img);//idがworkのdivタグ内にimgタグを追加
    });
}

回答例2

ループカウンターを利用するレガシーな方法です。

基本的には配列のループであることが明確なforEachの方が好ましいですが、

計算などで利用するためにループカウンターが必要な場合はこちらの方法が好ましいです。

forEachの無名ファンクションを嫌って、こちらの方法を好む人もいます。

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を用意
    
    for(let i=0; i<imgList.length; i++){
      let img = document.createElement("img"); // 空のimgタグを変数として作成
      img.setAttribute("src",imgList[i]); // src属性に画像URLを設定
      document.getElementById("work").appendChild(img);//idがworkのdivタグ内にimgタグを追加    
    }
}

課題一覧

JavaScript 初心者用練習課題