JavaScript 初心者用練習課題 006 5個の画像URLを配列で用意し追加ボタン押下時に全て表示する
前回の課題
今回はループを扱います。
多くのプログラム言語の共通にして基本の要素は判断とループと変数です。
課題用のファイル
内容説明
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タグを追加
}
}