Das change-Ereignis in JavaScript

In dieser Lektion werden wir gemeinsam das Ereignis change besprechen, das in Eingabefeldern bei deren Änderung auftritt. Was bedeutet das? Nehmen wir an, Sie haben ein Input-Feld und darin befindet sich irgendein Text. Wenn Sie diesen Text ändern, dann tritt in diesem Fall dieses Ereignis auf.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben ein Input-Feld:

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

Lassen Sie uns bei seiner Änderung den neuen Wert in der Konsole ausgeben:

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

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

Задание 1

Gegeben sind ein Input-Feld und ein Absatz. Geben Sie bei Änderung des Input-Felds dessen Text in den Absatz aus.

Задание 2

Gegeben ist eine Checkbox. Geben Sie bei Änderung der Checkbox deren neuen Zustand auf dem Bildschirm aus.

Задание 3

Erklären Sie, worin der Unterschied zwischen den Ereignissen blur und change liegt.

Задание 4

Gegeben ist ein Input-Feld. Prüfen Sie bei dessen Änderung, ob die Anzahl der Zeichen darin weniger als 5 beträgt oder nicht. Wenn weniger - färben Sie den Rand des Input-Felds grün, und wenn mehr - rot.