「getElementByIdとsetAttribute」という命令を使って、ボタンをクリックすると、対応する画像が表示されるJavascriptの例です。
ボタンに対応した画像を表示するJavascript
いくつかのボタンを用意して、そのボタンに対応する画像を表示するJava Scriptです。ここでは「.setAttribute」という命令の使い方の一例です。
＊＊＊＊＊＊＊＊＊＊ ここから
下のボタンを押すとご当地のナンバープレートが表示されます。
＊＊＊＊＊＊＊＊＊＊ここまで
前ページで画像をクリックすると説明が別枠で表示される例を示しましたが、ここでは、1つのボタンをクリックすると、同じ画面内で対応する画像に変わるJavascriptの例です。
8枚のご当地のバイクのナンバープレート画像を用意してあり、イベントハンドラーの「onclick」で、ボタンに対応する画像を呼び出しています。
getElementById と setAttribute というメソッドを使っています。
こちらのページには、さらに画像の下にさらに紹介文が出る例がありますので参考にしてください。
PRこのJavascript
HTML部分に下のコードをすべてを書いているだけのものです。つまり、<script>～</script>を使って書いてはいません。
<img id="myPlate" src="img/np_daito.jpg">
<br>
下のボタンを押すとご当地のナンバープレートが表示されます。<br>
<br>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_daito.jpg');">大 東 市</button>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_higasioo.jpg');">東大阪市</button>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_hirakata.jpg');">枚 方 市</button>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_ibara.jpg');">茨 木 市</button><br>
<button onclick="document.getElementById('myPlate').setAttribute('src', 'img/np_ikeda.jpg');">池 田 市</button>
//以下省略
考え方や注意する点
Javascriptの記述の仕方は独特なので、初めのうちは馴染みにくいと思いますので、ここでは少し詳しく説明します。
ここでは、DOM（Documentt Object Model）のメソッドの「.getElementById」「.setAttribute」を使っています。
この2つは使い勝手の良いもので、何かを表示させるときに使うことができます。
「.getElementById」はID属性のノードを取得する … ということをさせているのですが、これは、IDの部分の内容を他の表示に変えるためのもので、ここでは、すでに表示されている画像<img>に「id="myPlate"」をつけて、idの最初の画像を他の画像に入れ替えをしています。
そして、「.setAttribute」は、属性や値を追加するメソッド（命令）です。
sorce（ソース）を表す「src」属性と、入れ替えたい画像のファイル名を並べて書くことで別の画像に変えて表示できます。
ここでは、画像は私のimgという名前のホルダーおいているので、img/** としてそのホルダーにある画像を呼び出していますが、このimgホルダーは外部からは見えないところにあるものですから、コードを書く場合は自分の画像を指定のホルダーにいれるようにするのがわかりやすいでしょう。
また、ここでは「文字の足し算（つなぎ合わせ）」をしていますが、これを使う場面はしばしばあるので、このやり方を覚えておくと便利です。
注意する点は、Javascriptでは、半角空白はどこに入れてもいいので、コードを見やすくするために使うといいのですが、全角空白が混じっていると動きませんので注意しましょう。
私自身も、コードの中にある「全角空白」を見つけるのが大変だった … ということがありましたので、もしもうまく動かなかった場合には、コードの書き間違いや空白部分を疑ってみる事も覚えておいてください。
コードを書き間違えない対策として、マイクロソフトの「Visual Studio Code（利用は無料です）」を使うのもいい方法です。
そして、コードを書く際には、画像名や変数などの名前の付け方に自分なりのルールを決めておいて、メソッドと自分で作った変数が区別できるようにするのも有効でしょう。
私は、変数には「myAbc」のように「my＋最初の文字を大文字」のようにしていますし、画像名は、ここでは市町名のローマ字にしてあり、少し時間が立ってもわかるような自分なりのルールにしています。
しかし、その反面で、Javascriptで 「＋＋＝」「－－＝」などの算術演算子で加減による変化をさせて使うことが多いので、わかりやすい名前ではなくて「英字＋数字（例えばjim001など）」のような画像名にしておくと、画像を連続した数字で扱えて便利な場合もありますから、ケースバイケースですね。
さらに、（詳細は調べていただくといいのですが） 使えない文字があるのにも注意ですが、ここでは細かいことはパスします。
こちらのページで、画像切替にプラスして、文字（説明文）を一緒に変えて表示するJavascript を紹介しています。
PR
