JavaScript 初心者用練習課題 003 5個の画像URLを配列で用意し追加ボタン押下時にランダム(乱数)で表示する

2022年4月12日

前回の課題

今回の課題は配列変数と乱数を利用します。

課題用のファイル

内容説明

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 img = document.createElement("img"); // 空のimgタグを変数として作成
    
    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タグを追加
}

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

この「追加」ボタンをクリックするとHTML(div要素)中にGoogleのロゴが追加されます。

課題

ボタンを押した際に追加される画像を以下の5つからランダムで設定するように変更。

  • 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

配列の変数名は任意ですが、特に思いつかなければimgListとしましょう。

検索サイトで調べる場合は「JavaScript 乱数」、「JavaScript 配列」などの検索ワードで

得られる情報を組み合わせると良いでしょう。

回答例

function addImage(){
    let img = document.createElement("img"); // 空のimgタグを変数として作成
    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を用意
    let index = Math.floor( Math.random() * 5 ); // ランダムで0~4の数字を作成
    img.setAttribute("src",imgList[ index ] ); // src属性に画像URLを設定
    document.getElementById("work").appendChild(img);//idがworkのdivタグ内にimgタグを追加
}

Math.random()はランダムで0から1未満の少数を返す関数です。

これに5を掛け算と0~5未満の少数になります。

Math.floorは小数点以下を切り捨てる関数です。

これを組み合わせて Math.floor( Math.random() * 5 ) とすると

0,1,2,3,4のどれかの整数がランダムで取得される結果になります。

次の課題

課題一覧