JavaScript：キャラを選ぶ

selectタグで選択したキャラを選ぶ、という操作でimgタグの画像ファイルを変更するサンプルです。

サンプルで使った素材

5つの画像ファイルを使っています。No Imageという画像が最初の状態です。
選択できるキャラ画像は4種類です。
※右クリック＞名前をつけて画像を保存… でダウンロードできます。

ソースコード

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="main.js"></script>
	<title>JavaScript: キャラを選ぶ</title>
</head>
<body>
	<h1>JavaScript: キャラを選ぶ</h1>
	<div>
		どれにしますか？
		<select id="selectCharacter">
			<option selected disabled value="no_image.png">選択してください...</option>
			<option value="frog.png">カエル</option>
			<option value="pig.png">ブタ</option>
			<option value="crow.png">カラス</option>
			<option value="dragonfly.png">トンボ</option>
		</select>
	</div>
	<div>
		<img id="selectImage" src="no_image.png" width="400" height="300" alt="選択画像">
	</div>
</body>
</html>

style.css

/* style.css */
*{
	margin: 0;
	padding: 0;
}
body{
	font-size: 12pt;
    margin: 1em;
}
h1{
	border-bottom: solid 1px #000;
}
img{
    border: solid 1px #ddd;
    border-radius: 5px;
}

main.js

// ID: selectタグ, imgタグ
let selectCharacter, selectImage;

// セレクトタグで選択した画像に変更する
function setImage(){
    // 選択したキャラの画像ファイル名を取得
    let imageFileName = selectCharacter.value;
    // imgタグの画像を選択したキャラに変更
    selectImage.src = imageFileName;
    console.log(selectCharacter.value);
}

// 起動時の処理
window.addEventListener("load", ()=>{
    // DOM取得
    selectCharacter = document.getElementById("selectCharacter");
    selectImage = document.getElementById("selectImage");
    // セレクトタグイベント設定
    selectCharacter.addEventListener("change", setImage, false);
});