【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

【JavaScript】changeイベントの使い方について徹底解説

こちらの記事では、JavaScriptのchangeイベントについてサンプルコードを用いて分かりやすく解説しています。

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

changeイベントとは

changeイベントはイベントの中でも使用頻度が高く、<input>(フォーム)や<select>(選択メニュー)などのユーザー操作によって要素の値が変更されたタイミングで実行されるイベントです。

changeイベントは、要素の値が変更された瞬間に必ず発火するとは限りません。
例えば、< input type=”checkbox”>の場合は要素が:checkedになった時に発火されますが、<textarea>の場合はテキストがされてからフォーカスを失った時に発火されるなど、イベントを設定する要素によって発火タイミングが異なります。

changeイベントの使い方

changeイベントは「addEventListenerメソッド」「onchangeプロパティ」「onchange属性」の3つの書き方があります。

▼トリガーになる要素を取得(addEventListenerとonchangeプロパティで使用)
const sample = document.getElementById('sample'); // トリガーになる要素を取得

▼addEventListenerメソッド
sample.addEventListener('change',function(){ // 第一引数にchangeを指定
  // 処理を記述
});

▼onchangeプロパティ
sample.onchange = function(){
  // 処理を記述
};
▼onchange属性
<select onchange="changeEvent()">
	<option value="リスト1" selected>リスト1</option>
	<option value="リスト2">リスト2</option>
	<option value="リスト3">リスト3</option>
</select>

<script>
function changeEvent(){
  // 処理を記述
};
</script>

サンプルコード

フォームの値が変更された時

下記のサンプルコードは、ユーザーがテキストボックスに入力した値を取得し表示させます。

実行結果を載せているので、試しにテキストボックスに文字を入力して表示されるか確認してみてください。

<input id="sample-input" type="text" placeholder="任意の文字を入力してください">
<p>テキストボックスに入力した文字は「<span id="sample-output"></span>」です。</p>

<script>
window.addEventListener('DOMContentLoaded',function(){
  sampleInput = document.getElementById('sample-input');
  sampleOutput = document.getElementById('sample-output');
  sampleInput.addEventListener('change',textGet,false);

  function textGet(){
    sampleOutput.textContent = this.value;
  }
});
</script>
実行結果

テキストボックスに入力した文字は「」です。

チェックボックスが変更された時

下記のサンプルコードは、チェックボックスが付いているか付いていないかを判別します。

実行結果を載せているので、試しにチェックボックスにチェックを入れると「チェック済」が表示され、チェックを外すと「未チェック」が表示されていることが確認できます。

<label>
  <input type="checkbox" id="input-checkbox" name="sample-box">
		チェックボックスをクリックして切り替えよう!
</label>
<p>チェックボックスの状態:<span id="output-checkbox"></span></p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  inputCheckbox = document.getElementById('input-checkbox');
  outputCheckbox = document.getElementById('output-checkbox');
  inputCheckbox.addEventListener('change',checkboxStatus,false);

  function checkboxStatus(){
    if(this.checked){
      outputCheckbox.textContent = "チェック済";
    } else {
      outputCheckbox.textContent = "未チェック";
    }
  }
});
</script>
実行結果

チェックボックスの状態:

セレクトボックスが変更された時

下記のサンプルコードは、セレクトボックスで選択されているメニューを判別します。

実行結果を載せているので、試しにメニューを選択すると選択されたメニューの文字が表示されていることが確認できます。

<select id="input-select" name="lists">
  <option value="リスト1">リスト1</option>
  <option value="リスト2">リスト2</option>
  <option value="リスト3">リスト3</option>
</select>
<p>選択されているのは「<span id="output-select"></span>」です。</p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  const inputSelect = document.getElementById('input-select');
  const inputOptions = inputSelect.options;
  const outputSelect = document.getElementById('output-select');
  inputSelect.addEventListener('change',selectStatus,false);
  
  function selectStatus(){
    for(let i = 0; i < inputOptions.length; i++){
      if(inputOptions[i].selected){
        outputSelect.textContent = inputOptions[i].value;
      }
    }
  }
});
</script>
実行結果

選択されているのは「」です。

ラジオボタンが変更された時

下記のサンプルコードは、選択されたラジオボタンを判別します。

実行結果を載せているので、試しに3つあるラジオボタンの中から1つ選び選択すると、選択された文字が表示されていることが確認できます。

<form id="input-radio">
	<input name="sample-list" type="radio" value="ラジオボタン1"> ラジオボタン1
	<input name="sample-list" type="radio" value="ラジオボタン2"> ラジオボタン2
	<input name="sample-list" type="radio" value="ラジオボタン3"> ラジオボタン3
</form>
<p>選択されているのは「<span id="output-radio"></span>」です。</p>


<script>
window.addEventListener('DOMContentLoaded',function(){
  const inputRadio = document.getElementById('input-radio');
  const sampleList = document.getElementsByName('sample-list');
  const outputRadio = document.getElementById('output-radio');
  inputRadio.addEventListener('change',radioStatus,false);
  
  function radioStatus(){
    for(let i = 0; i < sampleList.length; i++){
      if(sampleList[i].checked){
        outputRadio.textContent = sampleList[i].value;
      }
    }
  }
});
</script>
実行結果
ラジオボタン1 ラジオボタン2 ラジオボタン3

選択されているのは「」です。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次