Change-tapahtuma JavaScriptissä

Tällä oppitunnilla tutkimme yhdessä change-tapahtuman, joka syntyy syöttökentissä niiden muuttuessa. Mitä tämä tarkoittaa? Oletetaan, että sinulla on syöttökenttä ja siinä on jokin teksti. Jos muutat tätä tekstiä, niin tässä tapauksessa tämä tapahtuma syntyy.

Katsotaanpa esimerkkiä. Olkoon meillä syöttökenttä:

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

Laittakaamme sen muuttuessa tulostamaan konsoliin sen uuden arvon:

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

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

Annettu syöttökenttä ja kappale. Syöttökentän muuttuessa tulosta sen teksti kappaleeseen.

Annettu valintaruutu. Valintaruudun muuttuessa tulosta ruudulle sen uusi tila.

Kerro, mitä eroa on blur- ja change-tapahtumien välillä.

Annettu syöttökenttä. Sen muuttuessa tarkista, onko sen merkkien määrä vähemmän kuin 5 vai ei. Jos vähemmän - väritä syöttökentän reuna vihreäksi, ja jos enemmän - punaiseksi.