- Learn
- Guida ai Web Components
- Gestire eventi
Gestire eventi
Per rendere il nostro componente veramente utile, proviamo ad aggiungere un po’ di interattività. Faremo in modo che l’utente possa esprimere la sua valutazione cliccando su una delle stelle visualizzate. Per ottenere questo risultato, è sufficiente modificare il codice della funzione createStar()
come mostrato di seguito:
createStar(starCode, index) {
let span = document.createElement("span");
span.setAttribute("class", "rating");
span.addEventListener("click", () => {
this.setAttribute("value", index);
});
span.innerHTML = starCode;
return span;
}
Abbiamo introdotto il secondo parametro index che indica la posizione (e quindi il valore) della stella che stiamo creando. Abbiamo inoltre aggiunto un gestore d’evento alla stella generata che in corrispondenza del clic imposta il corrispondente valore sull’attributo value, innescando il meccanismo di aggiornamento che abbiamo implementato prima.
Da notare come nell’associazione del listener all’evento click abbiamo fatto ricorso ad una
arrow function
e non ad una classica function. Questo evita ambiguità sul
significato di this
, che nel nostro caso farà riferimento al Web
component che stiamo implementando.
Una volta modificata la funzione createStar()
dobbiamo adeguare la
funzione createStarList()
per fare in modo che ad ogni chiamata a createStar()
venga passato un valore per index. Il
seguente codice mostra la nuova versione di createStarList()
:
createStarList() {
let div = document.createElement("div");
let star;
for (let i = 1; i <= this.maxValue; i++) {
if (i <= this.value) {
star = this.createStar("★", i);
div.appendChild(span);
} else {
star = this.createStar("☆", i);
}
div.appendChild(star);
}
return div;
}
A questo punto avremo il nostro componente con il comportamento reattivo che ci aspetteremmo.
Se vuoi aggiornamenti su JavaScript inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Device e domotica! #dilloalfuturo
Per il futuro mi aspetto da Microsoft l’integrazione di tutti device e più domotica