前回の課題
今回の課題は配列変数と乱数を利用します。
課題用のファイル
内容説明
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のどれかの整数がランダムで取得される結果になります。