JavaScript

JavaScriptの change イベントで、フォーム部品の値の変更が確定したときに処理を実行する基本を説明します。

この記事でわかること

change event

　changeイベントは <input>, <select>, <textarea> 要素において、ユーザーによる要素の値の変更が確定したときに発生します。inputイベントとは異なり、changeイベントは要素の値 (value) が変更されるたびに発生するとは限りません。

JavaScript

const select = document.querySelector("#color");
select.addEventListener("change", event => {
    document.querySelector("#message").textContent = `選択: ${event.target.value}`;
});