このHPでは、JavaScriptの基礎的な[button onclick=" "] [function] [.getElementById()] [innerHTML()]などを使って、ボタンをクリックすると写真が表示する簡単なコードを紹介しています。
「クリックすると写真が表示」 イベントハンドラーの例
＊＊＊＊＊＊＊＊＊プログラムはここから
＊＊＊＊＊＊＊＊＊＊プログラムはここまで。
もう一度見る場合は、F5でブラウザを再読み込みしてください。
イベントハンドラーが使えれば、いろいろと遊べます
「ボタンをクリックすると写真が表示されます」というように、「＊＊をすると（この場合はボタンをクリックすると）」、何かの動作（この場合は写真の表示）をする…… というものが「イベントハンドラー」「イベントリスナー」と呼ばれるものです。
イベントハンドラーはHTML上に書いてscript部分に渡すという使い方で、もう一方のイベントリスナーは同じ動きを <script>～</script> の中に書いて用いるものです。
イベントリスナーのほうが利用度が高いのですが、ここでは、動きがわかりやすい「イベントハンドラー」で、「ボタンをクリックすると写真が表示される」という例を取り上げています。イベントリスナーの例はこちらのページにあります。
プログラムコード
【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>
このHPでは、説明しやすいように sprict部分 もHTMLといっしょに書いています。
コードが見やすいように、私が作った変数は、前に「my」のついた名前（ここでは myAns myPic mySyasinなど）にしています。 また、画像は「img」というホルダー内に置いていますので、「img/＊＊＊.jpg」などのようなパスになっていますから、自分用に書く場合には適宜変更してください。
【プログラムの流れ】 まず、①HTML部分でボタンを設置して、②文章を置き換える部分にJavaScriptで参照するための「id=myPic」を設定しています。
ボタンのイベントの飛び先を「ｍｙAns」としているのが③のfanction部分で、そこでは、先に書いている説明（myPic部分）を.getElementById で取得して、innerHTML で文章と写真を書き出すという動作です。
このような説明を文字で書くとわかりにくいでしょうが、「こんなことをJavaScriptを使ってやっている」というところを見ておいてください。
ともかく、この書き方を真似して、変数名などを自分のものに変更して、動かしてみるのが理解への早道だと思います。
ここで使っている、[button onclick=" "] [function] [.getElementById()] [innerHTML()] などは、このHPでよく使っているものです。
イベントハンドラはいろいろなものが用意されています
「ボタンがクリックされた」「ページを読み込んだ」「フォームの内容が変更された」 などが「イベント」ですが、それによってなにかをさせたいときに用いるものが「イベントハンドラー」です。
大きく分けて「マウス操作に関連するもの」「ページの読み込みに関係するもの」「フォームに関連するもの」などがあります。
よく使いそうなものをあげると、マウスをクリックしたとき「onclick」 マウスを文字や写真の上においたとき「onmouseover」 マウスを外したとき「onmouseout」 ページが読み込まれたとき「onload」 別のページに移動したとき[onunload」 エラーが発生したとき「onerror」 フォームの内容が変更されたとき「onchange」 submitボタンがクリックされたとき「onsubmit」 その他があります。 いろいろな場面に使えそうな感じがするでしょう。
使い方は、<button onclick="myAns()> という、この上のコードにある使い方以外に、<input type="button" value="CLICK"> などと書いて使う場合があります。
このHPでは、クイズや占いなどを作る目的ですから、ほとんどにイベントハンドラーやイベントリスナーを使っています。
→こちら .addEventListener('click', my＊＊＊)という、サイコロを振るときにイベントリスナーを使った記事が、またこちらにも、写真をクリックすると説明が出る例など、いろいろなところで使っています。
