L'événement change en JavaScript

Dans cette leçon, vous et moi allons analyser l'événement change, qui se produit dans les champs de saisie lors de leurs modifications. Qu'est-ce que cela signifie ? Supposons, par exemple, que vous ayez une input et qu'il y ait un certain texte à l'intérieur. Si vous modifiez ce texte, alors dans ce cas, cet événement se produira.

Regardons un exemple. Supposons que nous ayons une input :

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

Lors de sa modification, affichons dans la console sa nouvelle valeur :

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

elem.addEventListener('change', function() {
  console.log(this.value);
});
Задание 1

Étant donné une input et un paragraphe. Lors du changement de l'input, affichez son texte dans le paragraphe.

Задание 2

Étant donné une case à cocher. Lors du changement de la case à cocher, affichez à l'écran son nouvel état.

Задание 3

Expliquez quelle est la différence entre les événements blur et change.

Задание 4

Étant donné une input. Lors de son changement, vérifiez si le nombre de caractères qu'elle contient est inférieur à 5 ou non. S'il est inférieur - colorez la bordure de l'input en vert, et s'il est supérieur - en rouge.