Codice completo
Il contatore conserva il valore in una variabile e aggiorna il testo a ogni click.
<div class="counter-demo">
<p>Valore: <strong id="valore">0</strong></p>
<button id="meno">-1</button>
<button id="piu">+1</button>
<button id="reset">Reset</button>
</div>
<script>
const valore = document.querySelector('#valore');
const piu = document.querySelector('#piu');
const meno = document.querySelector('#meno');
const reset = document.querySelector('#reset');
let conteggio = 0;
function aggiorna() {
valore.textContent = conteggio;
}
piu.addEventListener('click', function() {
conteggio++;
aggiorna();
});
meno.addEventListener('click', function() {
conteggio--;
aggiorna();
});
reset.addEventListener('click', function() {
conteggio = 0;
aggiorna();
});
</script>
Commento
- conteggio è lo stato dell'interfaccia.
- La funzione aggiorna() evita di ripetere la stessa istruzione tre volte.
- I pulsanti non modificano direttamente l'HTML: cambiano prima la variabile, poi aggiornano la pagina.
Prova a modificarlo
Cambia nomi, testi e valori iniziali. Poi aggiungi una piccola regola CSS per rendere evidente lo stato dell'interfaccia.