# Nappi — DOM Events and State in Tampio
#
# Tampio handles async interactions through DOM event handlers.
# The key pattern is "X:tä painettaessa käyköön niin, että ..."
# which attaches a click handler to a button element.
#
# State is stored in a "muuttuja" (variable object with an "arvo" field).
# "kasvatetaan yhdellä" increments the stored value in place.
# "näytetään käyttäjälle" writes the current value to the page output.
#
# DOM utilities:
#   etsii elementin nimellä "id" tuloksenaan X  = document.getElementById
#   kirjoitetaan koodi "html"                    = element.innerHTML =
#   pyyhitään                                    = element.innerHTML = ""

# Global counter — persists across button clicks
Olkoon kiva laskuri uusi muuttuja, jonka arvo on nolla.

Kun nykyinen sivu avautuu,
	nykyinen sivu etsii elementin nimellä "output" tuloksenaan kiva alue,
	kivalle alueelle kirjoitetaan koodi "<p><button id='natti'>+1</button> <button id='hieno'>+10</button></p>",
	nykyinen sivu etsii elementin nimellä "natti" tuloksenaan nätti nappi,
	nykyinen sivu etsii elementin nimellä "hieno" tuloksenaan hieno nappi,
	nättiä nappia painettaessa käyköön niin, että
			kivan laskurin arvoa kasvatetaan yhdellä
		ja	kivan laskurin arvo näytetään käyttäjälle
ja	hienoa nappia painettaessa käyköön niin, että
			kivan laskurin arvoa kasvatetaan kymmenellä
		ja	kivan laskurin arvo näytetään käyttäjälle.