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タグを追加
    }    
}

次の課題

課題一覧