ボタンに対応した画像を表示するJavascript
いくつかのボタンを用意して、そのボタンに対応する画像を表示するJava Scriptで、「.setAttribute」という命令を使っています。
＊＊＊＊＊＊＊＊＊＊ ここから
下のボタンを押すとご当地のナンバープレートが表示されます。
＊＊＊＊＊＊＊＊＊＊ここまで
前ページでは、画像をクリックすると説明が別枠で表示されるものでしたが、ここでは、1つのボタンをクリックすると、同じ画面内で対応する画像に変わるJavascriptの例です。
ここでは、8枚のご当地のバイクのナンバープレート画像を用意して、イベントハンドラーの「onclick」で、ボタンに対応する画像を呼び出していますが、getElementById と setAttribute というメソッドを使っています。
こちらのページに、このJavascriptの書き方を変えて、画像の下にさらに紹介文が出るものを作りましたので参考にしてください。
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/** としてそこにある画像を呼び出しています）
このように、「文字の足し算」を命令の中で使う方法はしばしば出てきます。 注意点は、大文字と小文字を間違わないことだけです。
Javascriptでは、半角空白はどこに入れてもいいので、コードを見やすくするために使うといいのですが、全角空白が混じっているとダメで、それを見つけるのが大変だった… ということがありましたので、もしもうまく動かなかった場合には、コードの書き間違いを疑ってみる事も覚えておいてくださいね。
コードを書き間違えない対策として、マイクロソフトの「Visual Studio Code（利用は無料です）」を使うのもいい方法です。
そして、画像名や変数などの名前の付け方も、自分なりにルールを決めておくと、メソッドと自分で作った変数が区別できるのでいいかもしれません。
ここでは、変数には「myAbc」のように「my＋最初の文字を大文字」のようにしていますし、画像名は市町名のローマ字にするなどで、少し時間が立ってもわかるような自分なりのルールにしています。
しかし、その反面で、Javascriptで 「＋＋＝」「－－＝」などの算術演算子で加減による変化をさせて使うことが多いので、わかりやすい名前ではなくて「英字＋数字（例えばjim001など）」のように画像名をつけると、画像を連続した数字で扱えるので、このような便利な方法もあります。
そして、（詳細は調べていただくといいのですが） 使えない文字があるのにも注意ですが、ここでは細かいことはパスします。
こちらのページで、画像切替にプラスして、文字（説明文）を一緒に変えて表示するJavascript を紹介しています。
PR
