はじめに
この記事を読めば、JavaScriptのonchangeイベントを活用してWebページにインタラクティブな要素を追加することができるようになります。
初心者でも理解しやすいよう、基本的な使い方から応用例まで、サンプルコード付きで徹底解説していきます。
●JavaScriptのonchangeイベントとは
JavaScriptのonchangeイベントは、HTML要素の値が変更されたときに発生するイベントです。
例えば、テキストボックスやセレクトボックスなどのフォーム要素の値がユーザーによって変更されたとき、自動的に実行される処理を設定することができます。
●onchangeイベントの基本的な使い方
○サンプルコード1：テキストボックスでのonchangeイベント
このコードでは、テキストボックスの値が変更されたときにアラートを表示するonchangeイベントを紹介しています。
この例では、テキストボックスの値が変更されるとアラートで「値が変更されました」と表示されます。
<!DOCTYPE html>
<html>
<head>
<title>onchangeイベントのサンプル</title>
<script>
function showAlert() {
alert('値が変更されました');
}
</script>
</head>
<body>
<input type="text" onchange="showAlert()">
</body>
</html>●onchangeイベントの応用例
○サンプルコード2：セレクトボックスでのonchangeイベント
このコードでは、セレクトボックスの選択肢が変更されたときに選択された値を表示するコードを紹介しています。
この例では、選択肢が変更されると選択された値が「選択された値: 〇〇」の形で表示されます。
<!DOCTYPE html>
<html>
<head>
<title>onchangeイベントのサンプル</title>
<script>
function showSelectedValue() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
document.getElementById("result").innerText = '選択された値: ' + selectedValue;
}
</script>
</head>
<body>
<select id="selectBox" onchange="showSelectedValue()">
<option value="1">選択肢1</option>
<option value="2">選択肢2</option>
<option value="3">選択肢3</option>
</select>
<div id="result"></div>
</body>
</html>○サンプルコード3：ラジオボタンでのonchangeイベント
このコードでは、ラジオボタンの選択が変更されたときに選択された項目を表示するonchangeイベントを紹介しています。
この例では、ラジオボタンが選択されると選択された項目が「選択された項目: 〇〇」の形で表示されます。
<!DOCTYPE html>
<html>
<head>
<title>onchangeイベントのサンプル</title>
<script>
function showSelectedRadio() {
var radios = document.getElementsByName("radioGroup");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
document.getElementById("result").innerText = '選択された項目: ' + radios[i].value;
break;
}
}
}
</script>
</head>
<body>
<input type="radio" name="radioGroup" value="項目1" onchange="showSelectedRadio()">項目1
<input type="radio" name="radioGroup" value="項目2" onchange="showSelectedRadio()">項目2
<input type="radio" name="radioGroup" value="項目3" onchange="showSelectedRadio()">項目3
<div id="result"></div>
</body>
</html>○サンプルコード4：チェックボックスでのonchangeイベント
このコードでは、チェックボックスの状態が変更されたときにチェックされた項目を表示するonchangeイベントを紹介しています。
この例では、チェックボックスがチェックされると「チェックされた項目: 〇〇」の形で表示されます。
<!DOCTYPE html>
<html>
<head>
<title>onchangeイベントのサンプル</title>
<script>
function showCheckedItems() {
var checkboxes = document.getElementsByName("checkboxGroup");
var checkedItems = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkedItems.push(checkboxes[i].value);
}
}
document.getElementById("result").innerText = 'チェックされた項目: ' + checkedItems.join(', ');
}
</script>
</head>
<body>
<input type="checkbox" name="checkboxGroup" value="項目1" onchange="showCheckedItems()">項目1
<input type="checkbox" name="checkboxGroup" value="項目2" onchange="showCheckedItems()">項目2
<input type="checkbox" name="checkboxGroup" value="項目3" onchange="showCheckedItems()">項目3
<div id="result"></div>
</body>
</html>○サンプルコード5：ファイルアップロードでのonchangeイベント
このコードでは、ファイルアップロードの要素で選択されたファイル名を表示するonchangeイベントを紹介しています。
この例では、ファイルが選択されるとファイル名が「選択されたファイル: 〇〇」の形で表示されます。
<!DOCTYPE html>
<html>
<head>
<title>onchangeイベントのサンプル</title>
<script>
function showSelectedFile() {
var fileInput = document.getElementById("fileInput");
var fileName = fileInput.files[0].name;
document.getElementById("result").innerText = '選択されたファイル: ' + fileName;
}
</script>
</head>
<body>
<input type="file" id="fileInput" onchange="showSelectedFile()">
<div id="result"></div>
</body>
</html>●注意点と対処法
onchangeイベントは、フォーム要素の値が変更されるたびに発生しますが、一部のブラウザでは正しく動作しない場合があります。
そのような場合、代わりにaddEventListenerメソッドを用いてイベントリスナーを追加することで対処が可能です。
●カスタマイズ方法
onchangeイベントをカスタマイズするには、イベントハンドラ内の処理を変更するだけでなく、イベント発生時に実行される関数を変更することも可能です。
例えば、選択された値に応じて異なるアクションを実行するようにカスタマイズできます。
まとめ
この記事では、JavaScriptのonchangeイベントを利用して、テキストボックスやセレクトボックス、ラジオボタン、チェックボックス、ファイルアップロードなどのフォーム要素の値が変更されたときに実行される処理を紹介しました。
各サンプルコードを参考に、自分のプロジェクトに合わせてカスタマイズしてみてください。
