JavaScriptにおけるchangeイベント

このレッスンでは、入力フィールドの値が変更された際に発生するイベント changeについて詳しく見ていきます。これはどういう意味でしょうか？例えば、テキストが入力されている入力フィールドがあるとします。そのテキストを変更すると、このイベントが発生します。

例を見てみましょう。以下のような入力フィールドがあるとします：

<input id="elem" value="text">

この入力フィールドが変更された際に、その新しい値をコンソールに出力してみましょう：

let elem = document.querySelector('#elem');

elem.addEventListener('change', function() {
	console.log(this.value);
});

入力フィールドと段落があります。入力フィールドが変更されたら、そのテキストを段落に出力してください。

チェックボックスがあります。チェックボックスの状態が変更されたら、その新しい状態を画面に表示してください。

blurイベントとchangeイベントの違いについて説明してください。

入力フィールドがあります。その値が変更された際に、入力されている文字数が5文字未満かどうかを確認してください。5文字未満の場合は入力フィールドの境界線を緑色に、5文字以上の場合は赤色に変更してください。