HTMLのonchangeを熟知！使い方と応用例10選

はじめに
●HTMLのonchangeイベントとは
- ○onchangeイベントの基本
●onchangeイベントの使い方
- ○サンプルコード1：セレクトボックスでの使い方
- ○サンプルコード2：チェックボックスでの使い方
●onchangeイベントの応用例とサンプルコード
●注意点と対処法
- ○onchangeイベントは入力要素がフォーカスを失った際に発火
●カスタマイズ方法
まとめ

はじめに

HTMLのonchangeイベントは非常に重要な役割を果たします。

この記事では、onchangeイベントの基本から応用まで、詳しく解説していきます。

初心者の方でも理解しやすいよう、分かりやすい言葉で説明していきますので、ぜひ最後までお読みください。

●HTMLのonchangeイベントとは

onchangeイベントは、フォーム要素の値が変更されたときに発生するイベントです。

ユーザーの操作に応じて動的にウェブページの内容を更新したい場合に非常に便利です。

特にセレクトボックスやチェックボックス、ラジオボタンなどのフォーム要素でよく使用されます。

○onchangeイベントの基本

onchangeイベントの基本的な動作を理解することは、インタラクティブなウェブページを作成する上で非常に重要です。

このイベントは、ユーザーがフォーム要素の値を変更し、その要素からフォーカスが外れたときに発生します。

例えば、ドロップダウンリストで新しい選択肢を選んだ場合や、テキストボックスに新しいテキストを入力して別の場所をクリックしたときなどに、onchangeイベントが発火します。

●onchangeイベントの使い方

onchangeイベントの使い方を、具体的なサンプルコードを交えて説明していきます。

実際のコードを見ながら学ぶことで、理解が深まるでしょう。

○サンプルコード1：セレクトボックスでの使い方

まずは、セレクトボックスでのonchangeイベントの使い方を見てみましょう。

次のコードでは、果物を選択すると、その選択された果物の名前がアラートで表示されます。

<select id="selectBox" onchange="showSelectedValue()">
  <option value="apple">りんご</option>
  <option value="orange">オレンジ</option>
  <option value="banana">バナナ</option>
</select>

<script>
function showSelectedValue() {
  const selectBox = document.getElementById('selectBox');
  const selectedValue = selectBox.value;
  alert('選択された果物: ' + selectedValue);
}
</script>

このコードでは、セレクトボックスの選択肢が変更されるたびに、showSelectedValue()関数が呼び出されます。

この関数は、選択された果物の値を取得し、アラートで表示します。

○サンプルコード2：チェックボックスでの使い方

次に、チェックボックスでのonchangeイベントの使い方を見てみましょう。

チェックボックスの状態が変更されたときに、その状態をアラートで表示します。

<label>
  <input type="checkbox" id="checkBox" onchange="checkChanged()">
  チェックボックス
</label>

<script>
function checkChanged() {
  const checkBox = document.getElementById('checkBox');
  const isChecked = checkBox.checked;
  alert('チェック状態: ' + isChecked);
}
</script>

このコードでは、チェックボックスの状態が変更されるたびに、checkChanged()関数が呼び出されます。

この関数は、チェックボックスの現在の状態（チェックされているかどうか）を取得し、アラートで表示します。

●onchangeイベントの応用例とサンプルコード

onchangeイベントの基本的な使い方を理解したところで、より実践的な応用例を見ていきましょう。

この例を参考にすることで、onchangeイベントの可能性を広げることができます。

○サンプルコード3：フォーム内容の即時表示

ユーザーが入力した内容をリアルタイムで表示する機能は、ウェブフォームでよく使われます。

これを実現するには、oninputイベントを使用します。

<label for="inputText">テキスト入力：</label>
<input type="text" id="inputText" oninput="displayInput()" />
<p>入力内容：<span id="displayText"></span></p>

<script>
function displayInput() {
  const inputText = document.getElementById('inputText');
  const displayText = document.getElementById('displayText');
  displayText.textContent = inputText.value;
}
</script>

このコードでは、ユーザーがテキストを入力するたびに、その内容がリアルタイムで表示されます。

oninputイベントを使用することで、入力のたびに即座に反応することができます。

○サンプルコード4：条件に応じた表示の切り替え

ユーザーの選択に応じて、異なるコンテンツを表示する機能は、ウェブサイトの使いやすさを向上させます。

次のコードでは、セレクトボックスの選択に応じて、異なるセクションを表示しています。

<select id="selectBox" onchange="displaySection()">
  <option value="section1">セクション1</option>
  <option value="section2">セクション2</option>
  <option value="section3">セクション3</option>
</select>

<div id="section1" class="section">セクション1の内容</div>
<div id="section2" class="section" hidden>セクション2の内容</div>
<div id="section3" class="section" hidden>セクション3の内容</div>

<script>
function displaySection() {
  const selectBox = document.getElementById('selectBox');
  const selectedValue = selectBox.value;
  const sections = document.getElementsByClassName('section');
  for (let section of sections) {
    section.hidden = section.id !== selectedValue;
  }
}
</script>

このコードでは、セレクトボックスの選択が変更されるたびに、displaySection()関数が呼び出されます。

この関数は、選択されたセクションを表示し、他のセクションを非表示にします。

○サンプルコード5：入力値のバリデーション

フォームの入力値を検証することは、データの正確性を確保するために重要です。

次のコードでは、入力された数値が1から10の範囲内かどうかをリアルタイムでチェックしています。

<label for="inputNumber">数字入力（1～10）：</label>
<input type="number" id="inputNumber" oninput="validateInput()" />
<p id="validationMessage" hidden>数字は1～10の範囲で入力してください。</p>

<script>
function validateInput() {
  const inputNumber = document.getElementById('inputNumber');
  const validationMessage = document.getElementById('validationMessage');
  const inputValue = inputNumber.value;
  validationMessage.hidden = inputValue >= 1 && inputValue <= 10;
}
</script>

このコードでは、ユーザーが数値を入力するたびに、validateInput()関数が呼び出されます。

この関数は、入力値が1から10の範囲内にあるかをチェックし、範囲外の場合はエラーメッセージを表示します。

○サンプルコード6：動的なセレクトボックスの作成

カテゴリとサブカテゴリのような階層構造を持つデータを扱う場合、動的なセレクトボックスが役立ちます。

次のコードでは、最初のセレクトボックスの選択に応じて、2つ目のセレクトボックスの内容が動的に変更されます。

<select id="categorySelect" onchange="updateSubcategory()">
  <option value="fruits">果物</option>
  <option value="vegetables">野菜</option>
</select>

<select id="subcategorySelect">
</select>

<script>
const categories = {
  fruits: ['りんご', 'オレンジ', 'バナナ'],
  vegetables: ['トマト', 'キャベツ', 'にんじん']
};

function updateSubcategory() {
  const categorySelect = document.getElementById('categorySelect');
  const subcategorySelect = document.getElementById('subcategorySelect');
  const selectedCategory = categorySelect.value;

  subcategorySelect.innerHTML = '';

  categories[selectedCategory].forEach(item => {
    const option = document.createElement('option');
    option.value = item;
    option.textContent = item;
    subcategorySelect.appendChild(option);
  });
}

updateSubcategory();
</script>

このコードでは、最初のセレクトボックスの選択が変更されるたびに、updateSubcategory()関数が呼び出されます。

この関数は、選択されたカテゴリに応じてサブカテゴリのセレクトボックスの内容を更新します。

○サンプルコード7：オートコンプリート機能の実装

ユーザーの入力を補助するオートコンプリート機能は、使いやすいフォームを作成する上で非常に重要です。

次のコードでは、ユーザーの入力に応じて候補を表示するシンプルなオートコンプリート機能を実装しています。

<input type="text" id="searchBox" oninput="autocomplete()" list="suggestions" />
<datalist id="suggestions"></datalist>

<script>
const words = ['りんご', 'バナナ', 'オレンジ', 'キウイ', 'ぶどう'];

function autocomplete() {
  const searchBox = document.getElementById('searchBox');
  const suggestions = document.getElementById('suggestions');
  const inputValue = searchBox.value;

  suggestions.innerHTML = '';

  words.forEach(word => {
    if (word.startsWith(inputValue) && inputValue !== '') {
      const option = document.createElement('option');
      option.value = word;
      suggestions.appendChild(option);
    }
  });
}
</script>

このコードでは、ユーザーが文字を入力するたびに、autocomplete()関数が呼び出されます。

この関数は、入力された文字列で始まる単語を候補として表示します。

○サンプルコード8：画像のプレビュー表示

ファイルアップロード機能を持つフォームでは、アップロードされる画像のプレビューを表示することが有用です。

次のコードでは、選択された画像ファイルのプレビューを表示します。

<input type="file" id="imageInput" onchange="previewImage()" accept="image/*" />
<img id="preview" width="200" hidden />

<script>
function previewImage() {
  const imageInput = document.getElementById('imageInput');
  const preview = document.getElementById('preview');
  const file = imageInput.files[0];
  const reader = new FileReader();

  reader.onload = e => {
    preview.src = e.target.result;
    preview.hidden = false;
  };

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.hidden = true;
  }
}
</script>

このコードでは、ファイルが選択されるたびに、previewImage()関数が呼び出されます。

この関数は、選択された画像ファイルを読み込み、プレビュー用の<img>要素に表示します。

○サンプルコード9：グラフの更新

データの視覚化は、情報を効果的に伝える上で非常に重要です。

次のコードでは、ユーザーの選択に応じてグラフを動的に更新する機能を実装しています。

<select id="graphSelect" onchange="updateGraph()">
  <option value="graph1">グラフ1</option>
  <option value="graph2">グラフ2</option>
</select>

<canvas id="graphCanvas" width="400" height="200"></canvas>

<script>
const graphData = {
  graph1: [10, 20, 30, 40, 50],
  graph2: [50, 40, 30, 20, 10]
};

const graphCanvas = document.getElementById('graphCanvas');
const ctx = graphCanvas.getContext('2d');

function updateGraph() {
  const graphSelect = document.getElementById('graphSelect');
  const selectedGraph = graphSelect.value;

  ctx.clearRect(0, 0, graphCanvas.width, graphCanvas.height);

  graphData[selectedGraph].forEach((value, index) => {
    ctx.fillRect(index * 80 + 10, graphCanvas.height - value, 40, value);
  });
}

updateGraph();
</script>

このコードでは、セレクトボックスの選択が変更されるたびに、updateGraph()関数が呼び出されます。

この関数は、選択されたグラフのデータに基づいてキャンバス上にグラフを描画します。

●注意点と対処法

onchangeイベントを使用する際には、いくつかの注意点があります。

この点を理解し、適切に対処することで、より効果的にonchangeイベントを活用することができます。

○onchangeイベントは入力要素がフォーカスを失った際に発火

onchangeイベントの特性として、要素の値が変更され、かつその要素からフォーカスが外れたタイミングで発火するという点があります。

しかし、場合によってはユーザーの入力と同時にイベントを発火させたい場合もあるでしょう。

そのような場合は、前述のようにoninputイベントを使用することで、リアルタイムな反応を実現することができます。

●カスタマイズ方法

onchangeイベントは、HTML属性として直接記述する以外にも、JavaScriptを使用して要素に追加することができます。

この方法を使うと、HTMLとJavaScriptのコードを分離することができ、コードの見通しが良くなります。

const selectBox = document.getElementById('selectBox');
selectBox.addEventListener('change', function() {
  // 処理内容
});

この方法では、addEventListenerメソッドを使用してイベントリスナーを追加しています。

これで、HTML側でイベントハンドラを指定する必要がなくなり、コードの管理がしやすくなります。

まとめ

HTMLのonchangeイベントは、ウェブ開発において非常に重要な役割を果たします。

ユーザーの操作に応じて動的にページの内容を更新することで、インタラクティブで使いやすいウェブサイトを作成することができます。

この記事で学んだ内容を基に、さらに創造的なアイデアを実現していってください。