JavaScript 初心者用練習課題 001 ボタンクリック時に追加される画像を変更する
JavaScript初心者や新入社員に利用している課題です。
プログラミングはとにかく手を動かしてみることが上達の最適解です。
そのため課題を掲載していきます。
初回の課題は主にHTMLとJavaScriptを読んで、
ボタンクリックと基本的な要素の操作を理解するのが目的です。
課題用のファイル
内容説明
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のロゴからMicrosoftのロゴに変更します。
https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31
index.htmlとtest.jsを読んで変更する箇所を探しましょう。
回答例
test.jsの4行目で追加するURLをGoogleのロゴから
MicrosoftのロゴのURLに変更します。
function addImage(){
let img = document.createElement("img"); // 空のimgタグを変数として作成
img.setAttribute("src","https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE1Mu3b?ver=5c31"); // src属性に画像URLを設定
document.getElementById("work").appendChild(img);//idがworkのdivタグ内にimgタグを追加
}