hamatakeBlog

MENU

【JavaScript changeイベント】選択メニューが変更されたときの処理【JavaScript入門】

f:id:hamatakeBlog:20211020224807p:plain

おはようございます、hamatakeBlogです!

 

今回は

プルダウンメニューやラジオボタン、選択ボタンの選択項目が変更されたとき、またテキストボックスの内容が変更されたときにJavaScriptで処理を実行する方法

をご紹介します。

 

JS

そもそも、プルダウンとかがわからないんですけど...

 

そんな方のために、まずはどんな時に発火するイベントなのかをご紹介していきます!

(イベントってなんぞや、って人はこちらの記事を先に見ましょう!⇓

 

hamatakeblog.hatenablog.com

changeイベントが発火するパターン

項目変更やテキストボックスの変更時に発火するイベントをchangeイベントといいます。まずは、そのchangeイベントがどんなもので発火するのかを紹介しましょう!

プルダウンメニュー

プルダウンメニューとは、項目選択で利用される要素の一つで、ドロップダウンともいわれます。イメージは下記のものとなります。

HTMLでは、このように記載します。

<label>あなたの出身は?

  <select class="from" name="from">
    <option value="">未回答</option>
    <option value="hokkaidou">北海道</option>
    <option value="honnsyuu">本州</option>
    <option value="sikoku">四国</option>
    <option value="kyuusyuu">九州</option>
  </select>

</label>

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メモ

テキストボックス

テキストボックスは、文字入力ができる入力フォームです。

イメージはこちら。

 

名前:

 

名前:<input type="text" />

HTMLメモ

  • type="text"
    typeをtextに設定することで、テキストボックスを作成。

 

ということで、ほかにもchangeイベントが発火するパターンはありますが、参考までのご紹介とさせていただきます。

changeイベントの書き方(ここからが本題だから、前のやつは飛ばしてもよしとする)

さてここからが、本題!

今回は、各項目の要素が変更されたときに、値を出力するような処理をJavaScriptで実装していきます!

 

JS

本題に入るまで長いな!

こればっかりは、しゃーないです笑

プログラミングの勉強あるあるで、わからないことの説明文にわからない文言がでてきて、無限ループか?ってぐらいに沼にはまるんよね笑

 

と無駄話はこの辺にして、、

では!先ほど作成した、プルダウンメニューをつかって処理を作っていきます!

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>

JavaScript

// 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;
});

 

私の出身は、○○です。
 
選択した、項目のvalueの値が取得できていればOKです!少々ややこしく思えますが、緑文字でコメントしているものを見てもらえればなんとなくわかんるじゃないかと思います!(なげやり笑)
 
以上、changeイベントの説明でした!そのほか紹介していないラジオボタンチェックボックスでのchangeの記載方法は基本的に同じような感じでできます!
また別の記事で少しだけ紹介しようと思っているのでそちらもぜひ見てくださいね!