Evento change in JavaScript

In questa lezione analizzeremo con voi l'evento change, che si verifica nei campi di input quando vengono modificati. Cosa significa? Supponiamo, ad esempio, che tu abbia un input e che contenga del testo. Se modifichi questo testo, in questo caso si verificherà questo evento.

Diamo un'occhiata a un esempio. Supponiamo di avere un input:

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

Al suo cambiamento, visualizziamo nella console il suo nuovo valore:

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

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

Dato un input e un paragrafo. Alla modifica dell'input, visualizza il suo testo nel paragrafo.

Dato un checkbox. Alla modifica del checkbox, visualizza a schermo il suo nuovo stato.

Spiega qual è la differenza tra gli eventi blur e change.

Dato un input. Alla sua modifica, verifica se il numero di caratteri in esso contenuti è inferiore a 5 o meno. Se è inferiore - colora il bordo dell'input di verde, altrimenti di rosso.