JavaScript 初心者用練習課題 002 ボタンクリック時に追加される画像を変数で設定する

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のロゴが追加されます。

課題

現在、追加ボタンをクリックしたときに追加される画像URLを

setAttributeの中にリテラル(ハードコーディングとも)で設定されていますが

この部分を変数に変更します。

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

ボタンクリック時の挙動は変えずにプログラムの構造のみを変更します。

何かJavaScriptの本を所有している方は変数のページを参照し、

検索の場合は「JavaScript 変数」などで検索するとよいでしょう。

回答例

test.jsの2行目に変数を用意し、URLを設定します。

そして5行目のsetAttributeで変数を利用する形に変更します。

function addImage(){
    let imgUrl = "https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // 変数で画像URLを用意
    let img = document.createElement("img"); // 空のimgタグを変数として作成
    
    img.setAttribute("src",imgUrl); // src属性に画像URLを設定

    document.getElementById("work").appendChild(img);//idがworkのdivタグ内にimgタグを追加
}

この変数はその後、変更することがないため

letではなくconst(定数)で用意するとより良いです。

(課題は、とりあえず変数にしましたが)

function addImage(){
    const imgUrl = "https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // 変数で画像RULを用意
    let img = document.createElement("img"); // 空のimgタグを変数として作成
    
    img.setAttribute("src",imgUrl); // src属性に画像URLを設定

    document.getElementById("work").appendChild(img);//idがworkのdivタグ内にimgタグを追加
}

次の課題

課題一覧