クリックすると写真を表示ために、イベントハンドラの「onclick」を使ったJavascriptの例です。

ここでは、ボタンをクリックするとJavascriptを使って写真を表示させています。

「ボタンを押すと何かの動作をする」という場合には、イベントハンドラーやイベントリスナーというものを使いますが、ここでは、HTMLコードに書いて使う　イベントハンドラー　について取り上げています。　

この動作には、[button onclick=" "]　や　[function]　[.getElementById()]　[innerHTML()] などを使います。　

これらの使い方の基本に慣れると、いろいろ場面に使えるでしょう。

イベントハンドラー　onclick　を使う例

「ボタンをクリックすると写真が表示されます」のように、「＊＊をすると（この場合はボタンをクリックすると）」、何かの動作（この場合は写真の表示）をする……　というものに「イベントハンドラー」や「イベントリスナー」があります。（イベントリスナーはこちらの別のページで紹介しています）

＊＊＊＊＊　まず、ボタンを押してプログラミムを動作させてみましょう。

ボタンをクリックすると写真が出ます

＊＊＊＊＊＊＊＊＊＊サンプルプログラムはここまで。

以上のように単純なものですが、ボタンをクリックすると、最初にあった説明文が新しい説明文に置き変わり、更に、その下に画像が表示するようにしました。

この写真や文章を変えれば、いろいろな場面に使えるでしょう。

下のコードのように、イベントハンドラー部分はHTMLに書き、入れ替えるための説明文や画像はあらかじめ準備しておいて、<script>～</script>の中に書きます。

（注）もう一度動作をさせる場合は、F5を押してブラウザの再読み込みしてください。

イベントハンドラーを使うと、いろいろと遊べます

ここではイベントハンドラーを使うので、HTMLの中にコードを書いてscript部分に渡す…　という使い方をしていますが、もう一方のイベントリスナーは、HTML上に書くのではなく、別の位置の　<script>～</script>　部分の中に書いて用いる　…　という違いがあります。

<script>～</script>　のスクリプト部分にまとめて記述するイベントリスナーは　別のファイルにおいておけば、何回も使えるなど、利用（応用）しやすいのですが、ここでは、動きがわかりやすい「イベントハンドラー」で、「ボタンをクリックすると写真が表示される」という例を取り上げました。

イベントハンドラにはいろいろなものがあります

「ボタンがクリックされた」「ページを読み込んだ」「フォームの内容が変更された」　などが「イベント」といわれるものです。　

そして、それによってなにかをさせたいときに用いるものが「イベントハンドラー」です。

イベントハンドラーには「マウス操作に関連するもの」「ページの読み込みに関係するもの」「フォームに関連するもの」などがあります。

よく使いそうなものに、マウスをクリックしたとき「onclick」　　マウスを文字や写真の上においたとき「onmouseover」　　マウスを外したとき「onmouseout」　　ページが読み込まれたとき「onload」　　別のページに移動したとき[onunload」　　エラーが発生したとき「onerror」　　フォームの内容が変更されたとき「onchange」　　submitボタンがクリックされたとき「onsubmit」　などがあります。　

PR

プログラムコードの説明

【HTML部分】
<p><button onclick="myAns();">ボタンをクリックすると写真が出ます</button></p>　//①ボタン設置
<div id="myPic">このボタンをクリックするとここに写真を表示します。</div>　//②idをつける

【JavaScript部分】
<script>
function myAns() {　　　//③myPicのidのところに説明と写真を表示するための関数
let mySyasin = document.getElementById('myPic');
mySyasin.innerHTML = 'この本は、Indexのページで紹介したおすすめの本です。<br><img src="img/0385.jpg">';
}
</script>

緑字の　//　以降は　説明文（コメント）です。

②③のように、関数と命令が混同しやすいので、変数（私が勝手に名前をつけたもの）には、前に「my」のついた名前（ここでは　myAns　myPic　mySyasinなど）にしてコードが見やすいようにしています。　

また、画像は「img」というサーバーのホルダー内（外部からは見えません）に置いていますので、「img/＊＊＊.jpg」などのようなパスになっています。　この部分は、自分の画像の置き場所に合わせて変更してください。

【プログラムの流れ】　まず、①HTML部分でボタンを設置して、②文章を置き換える部分にJavaScriptで参照するためのidは「myPic」にしています。　Pを大文字にしているのは、勝手につけた変数であることがを分かるようにしているためです。

③のfanction部分では、ボタンのイベントの飛び先を「ｍｙAns」として、先に書いている説明（myPic部分）を　.getElementById　で取得して、　innerHTML　で文章と写真を書き出すという動作をさせています。

このように、説明を文字で書くとわかりにくくなりますが、「こんなことをJavaScriptを使ってやっている」というところの書き方を見ておいてください。

ともかく、書き方を真似して、変数名などを自分のものに変更して、動かしてみるのが理解への早道だと思います。　

ここで使っている、[button onclick=" "]　[function]　[.getElementById()]　[innerHTML()]　などは、このHPのいろいろなところで使っているので、「こうすればいい」というところを見ておいてください。

PR

更に動作を付け加えて改良することもできますね

上のコードでは、「id」で指定した部分の文章を画像に置き換えているやり方ですが、Javascriptは多機能なので、その他の方法もたくさんあると思います。　しかし、まず、自分なりに使える方法を1つ覚えて、それを使うのが良いでしょう。

ここでは、　<button onclick="myAns()>　という使い方ですが、それ以外に、<input type="button" value="CLICK"> と書く使い方もあります。

このHPは、クイズや占いなどの簡単なプログラムを動かせるのが目的なので、イベントハンドラーやイベントリスナーを使うことが多いのですが、→こちら　では、　.addEventListener('click', my＊＊＊)　のように、サイコロを振るときに、イベントハンドラーではなく、イベントリスナーを使った記事があります。　またこちらにも、写真をクリックすると説明が出る例があります。　このような使い方も参考にしてください。

PR

---