セレクトボックスを使って画像を表示する
これまでに、ボタンを押すと説明が別枠で表示される例（→こちら）やボタンに対応した画像が表示される例（→こちら）を取り上げました。 ここでは、セレクトボックスを使った例を取り上げています。
6枚のご当地のバイクのナンバープレート画像を用意しておいて、セレクトボックスで選択した画像を呼び出して表示しているだけのものですが、少しアレンジするといろいろな場面に使えるでしょう。
セレクトボックスはいろいろな場面に使えますので知っておいても損はないでしょう。
ご当地のバイク用ナンバープレートを表示する
＊＊＊＊＊＊＊＊＊＊ プログラムはここから
ナンバープレートを表示する都市を選んでください。
＊＊＊＊＊＊＊＊＊＊プログラムはここまで
PR
Javascriptプログラムの
<p>ナンバープレートを表示する都市を選んでください。<br></p>
<div>
<select id="myArea">
<option value="img/np_daito.jpg">大東市</option>
<option value="img/np_higasioo.jpg">東大阪市</option>
<option value="img/np_hirakata.jpg">枚方市</option>
<option value="img/np_ibara.jpg">茨木市</option>
<option value="img/np_ikeda.jpg">池田市</option>
<option value="img/np_kadoma.jpg">門真市</option>
</select>
</div>
<p> <br></p>
<img id="myStart" src="img/np_daito.jpg">
<script>
document.getElementById('myArea').addEventListener('change', myChange);
function myChange() {
let plateName = document.getElementById('myArea').value;
document.getElementById('myStart').setAttribute('src', plateName);
}
</script>
考え方や注意点など
ここでも、DOM（Documentt Object Model）にあるメソッドの、IDを参照する「.getElementById」と、属性と値を設定する「.setAttribute」を使っています。
私が勝手に作った変数は、myAreaなどの「my＋英大文字」のようにしています。
セレクトボックスを使う場合は、<select>と<option>で簡単に作ることができます。
また、その<select>の対象は<option value="">の「” ”」内に画像（などのHTML)を直接書くことができるのでシンプルに書くことができます。
ここでは画像を6枚の都市のナンバープレートにしていますが、もっとたくさん増やすことも問題なくできます。
しかい私は、最終的には、出題形式にして、「これはどこのナンバープレートでしょうか？」というようなクイズをイメージしていますので、セレクトボックスは使わないかもしれません。
重要なポイントは、「選択したものを表示すること」ですが、これも、基本的なやり方の、「.getElementById」はID属性のノードを取得する… というメソッドを使って、セレクトボックスのIDの部分の値（value)を取得して、それを「.setAttribute」で、以前表示していたものに変えて表示させています。
ここではイベントリスナーを使っており、addEventListenerメソッドを使って「フォームの内容変更」をしたいので 'change' を使っていますが、この書き方には注意が必要で、addEventListener（’イベント’，関数）； と書きますが、関数は’ ’で囲まないように書きます。
この「イベントリスナー」ですが、前のページなどで使った「onclick」のようなイベントハンドラーと同様の用途で使えます。 「on」をとった「click」という書き方になります。
イベントリスナーやイベントハンドラーには数種類あって、マウスの操作、ページの読み込みやエラー時の処理、フォームの操作などに使えるので、これらを覚えていくといろいろ操作ができそうな感じです。（2つを比較表示したこちらのページも参考に）
JavaScriptはページを開いた時点で動いています
このプログラムもそうですが、Javascriptは、ページを開くときにはすでに読み込まれて、スタンバイ状態になっています。
そしてまた、この「.getElementById」や他で紹介する innerHTML textContent などを用いると、画像を選び直ししても、同じ位置に画像が表示されるところが便利なところです。
たとえば、HTMLで<p>～</p>などで。画面に何かを表示させると、前のものが残っていて困る場合があるのですが、Javascriptはうまく解決してくれる良さがあります。もちろん、テキスト文章の書き出し位置を指定できますが、これはここでは取り上げません。
PR
