【JavaScript changeイベント】選択メニューが変更されたときの処理【JavaScript入門】
おはようございます、hamatakeBlogです!
今回は
プルダウンメニューやラジオボタン、選択ボタンの選択項目が変更されたとき、またテキストボックスの内容が変更されたときにJavaScriptで処理を実行する方法
をご紹介します。
そもそも、プルダウンとかがわからないんですけど...
そんな方のために、まずはどんな時に発火するイベントなのかをご紹介していきます!
(イベントってなんぞや、って人はこちらの記事を先に見ましょう!⇓)
changeイベントが発火するパターン
項目変更やテキストボックスの変更時に発火するイベントをchangeイベントといいます。まずは、そのchangeイベントがどんなもので発火するのかを紹介しましょう!
プルダウンメニュー
プルダウンメニューとは、項目選択で利用される要素の一つで、ドロップダウンともいわれます。イメージは下記のものとなります。
HTMLでは、このように記載します。
HTMLメモ
- <select></select>
セレクトタグ:セレクトボックスを作成する。初期値ではプルダウンメニューを作成。 - <option></option>
オプションタグ:selectタグの中に記載することで、セレクトボックス内の選択肢を作成する。
ラジオボタン
ラジオボタンは、選択項目の中から一つだけ選ばせたい場合に使用する入力フォームです。イメージは下記のような感じ。
<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性
HTMLメモ
- <input>
インプットタグ:typeの指定がない場合は、テキストボックスを作成。 - type="radio"
typeをradioに設定することで、inputタグをラジオボタンにする。
チェックボックス
チェックボックスは、先ほどのラジオボタンの複数選択可能バージョンです。
イメージは下記。
趣味:
<label><input type="checkbox" />飲む</label>
<label><input type="checkbox" />打つ</label>
<label><input type="checkbox" />買う</label>
HTMLメモ
- type="checkbox"
typeをcheckboxに設定することで、inputタグをチェックボックスにする。
テキストボックス
テキストボックスは、文字入力ができる入力フォームです。
イメージはこちら。
名前:
名前:<input type="text" />
HTMLメモ
- type="text"
typeをtextに設定することで、テキストボックスを作成。
ということで、ほかにもchangeイベントが発火するパターンはありますが、参考までのご紹介とさせていただきます。
changeイベントの書き方(ここからが本題だから、前のやつは飛ばしてもよしとする)
さてここからが、本題!
今回は、各項目の要素が変更されたときに、値を出力するような処理をJavaScriptで実装していきます!
本題に入るまで長いな!
こればっかりは、しゃーないです笑
プログラミングの勉強あるあるで、わからないことの説明文にわからない文言がでてきて、無限ループか?ってぐらいに沼にはまるんよね笑
と無駄話はこの辺にして、、
では!先ほど作成した、プルダウンメニューをつかって処理を作っていきます!
HTML
<label>あなたの出身は?
<select id="from" name="from">
<!-- hiddenで未回答を選択されないように隠す -->
<!-- selected="selected"で任意の項目を初期値に選択(未設定の場合は一番上の項目) -->
<option hidden selected="selected" value="">未回答</option>
<option value="hokkaidou">北海道</option>
<option value="honnsyuu">本州</option>
<option value="sikoku">四国</option>
<option value="kyuusyuu">九州</option>
</select>
</label>
<div>私の出身は、<span class="output"></span></div>
// document.querySelector('セレクタ')で指定されたセレクタのElementを返す
// 今回は、idがfromのもの(JS上では、id要素は「#」、class要素は「.」)
const selectElement = document.querySelector('#from');
// clickイベントでも紹介したaddEventListenerを使用。第一引数にchange。第二引数にイベント発火時の処理。
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.output');
// classがoutputのtextContentに選択された項目のvalue要素を代入。
result.textContent = event.target.value;
});
|