JavaScript 初心者用練習課題 004 HTML要素の有無で動作を変える1
前回の課題
今回はname属性と判断（if）、配列の要素数(length)を利用します。
課題用のファイル
内容説明
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のロゴが追加されます。
課題
追加ボタンをクリックしたときはGoogleロゴを追加しますが、
すでに追加されている場合は何もしないようにします。
方法は色々ありますが、今回はこのような方法とします。
- 追加するimgタグのname属性に任意の名称（今回はlogo）を設定
- imgタグをgetElementsByNameで検索し、結果の配列の要素数(length)で判定
回答例
test.jsを編集します。
getElementsByNameの該当するHTML要素がない場合、
lengthが0の配列が結果として返されることを利用します。
function addImage(){
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タグを追加
}
}