HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのonchangeイベント属性とは？構文とサンプルコードで解説

HTMLのonchange属性は、HTMLドキュメント内で要素の値が変更されたときに発火するイベント属性です。主に<select>（プルダウンリスト）、<input>、<textarea>などのフォーム要素と組み合わせて使われ、ユーザーが値を変更したタイミングでJavaScriptを実行できます。

構文

onchange属性の基本的な書き方は以下のとおりです。

<tagname onchange="script"></tagname>

属性値には、値が変更された際に実行したいJavaScriptの関数名や処理を指定します。

サンプルコード

それでは、HTML onchangeイベント属性の具体的な使用例を見てみましょう。この例では、好きな科目を選択するセレクトボックスを用意し、選択内容が変わるとその値が画面に表示される仕組みになっています。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
        padding: 20px;
    }
    .show {
        font-size: 1.1rem;
        margin: 1rem auto;
    }
    select {
        height: 2rem;
        width: 30%;
        font-size: 1rem;
        background: transparent;
        border: 2px solid #fff;
        outline: none;
    }
</style>
</head>
<body>
<h1>HTML onchange Event Attribute Demo</h1>
<p>Select your favourite subject:</p>
<select onchange="get()">
<option>Physics</option>
<option>Chemistry</option>
<option>Maths</option>
</select>
<div class="show"></div>
<script>
    function get() {
        var msg = document.querySelector('.show');
        msg.innerHTML = "Current Value is " + document.querySelector("select").value;
    }
</script>
</body>
</html>

コードのポイント

  • <select>要素にonchange="get()"を指定し、値が変更されたときに関数get()を呼び出しています。
  • get()関数内では、document.querySelector()を使ってセレクトボックスの現在の値を取得し、表示用の<div>に出力しています。

出力結果

上記のコードをブラウザで実行すると、次のような画面が表示されます。

HTMLのonchangeイベント属性とは？構文とサンプルコードで解説

次に、プルダウンリストの値を変更してみてください。onchangeイベントが発火し、選択した科目の値が即座に画面へ反映されるのが確認できます。

HTMLのonchangeイベント属性とは？構文とサンプルコードで解説

このように、onchange属性を活用すれば、ユーザーの入力や選択に応じた動的なWebページを簡単に実装できます。フォームのバリデーションやリアルタイム表示など、さまざまな場面で役立つので、ぜひ活用してみてください。

  1. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード