Ed ecco dunque il codice JavaScript che utilizza il metodo addEventListener per intercettare il clik del mouse sui due pulsanti più e meno.
Quello che faremo al click del mouse su ciascun button sarà semplicemente incrementare o decrementare il valore della variabile e scriverla nell’elemento che ha id number attraverso la proprietà innerHTML.
const number = document.getElementById('number');
const buttonPlus = document.getElementById('plus');
const buttonMinus = document.getElementById('minus');
buttonPlus.addEventListener('click', add);
buttonMinus.addEventListener('click', subtract);
let value = 0;
function add() {
value++;
number.innerHTML = value;
}
function subtract() {
value--;
number.innerHTML = value;
}
Progetti JavaScript – counter con diversi valori di incremento
In questo secondo esempio incrementiamo il counter con valori diversi: 1, 5, 10 oppure 100.
Cliccate dunque sui vari button per vedere l’incremento della variabile di partenza.
JavaScript Counter
0
In questo secondo esempio abbiamo utilizzato l’evento onclick direttamente sul pulsante nel codice HTML.
Potete notare che abbiamo passato un secondo parametro a seconda del valore che vogliamo incrementare.
Ecco di seguito il codice JavaScript:
const number = document.getElementById('number');
let value = 0;
function add(n) {
value = value + n;
number.innerHTML = value;
}
Conclusione
In questo articolo abbiamo sviluppato un semplice counter. Continueremo poi nei prossimi articoli a sviluppare tanti interessanti progetti in JavaScript.
In questa lezione realizzeremo una semplice to do list in JavaScript, un classico esercizio di JavaScript che permette di sperimentare i metodi appresi finora.
Per realizzare questo progetto infatti utilizzeremo alcuni metodi per manipolare il DOM in JavaScript.
Intanto provate il progetto che andremo a realizzare assieme inserendo una voce e cliccando poi sul pulsante add della figura sotto:
App To Do List
To do list in JavaScript – sviluppo del codice
Innanzitutto realizziamo il codice HTML del progetto.
Creiamo dunque una casella di input con un button e predisponiamo una lista dove appariranno tutti gli elementi che aggiungeremo a mano a mano.
Realizziamo poi del CSS a piacere per dare un tocco grafico, io ad esempio ho realizzato questo:
Prima di tutto abbiamo controllato che la casella di input contenesse del testo ed in caso contrario si esce dalla funzione con un return. In questo modo, se la casella è vuota non si crea una lista.
Dopo, abbiamo utilizzato il metodo addEventListener per catturare il click dapprima sul pulsante add per aggiungere una voce nell’elenzo e poi sul pulsante delete per eliminare la voce corrispondente.
All’interno della funzione generateList abbiamo utilizzato i metodi createElement e createTextNode rispettivamente per creare dei tag necessari (li e button) ed aggiungere del testo.
Dopo aver aggiunto la voce svuotiamo la casella di input.
Conclusione
In questa lezione abbiamo sviluppato una semplice to do list in JavaScript, provate anche voi a svilupparne una e scrivete nei commenti sotto. Nelle prossime lezioni svilupperemo tanti altri progetti creativi.
