Prilikom stvaranja stranica ponekad je potrebno da se kada kliknete na dugme postavljeno na stranici u pretraživaču dogodi neki događaj koji je autor programirao. Da biste to učinili, morate smjestiti JavaScript kôd u generirani dokument i povezati ga s potrebnim gumbom. Ovisno o količini koda koja je potrebna za implementaciju namjeravanog događaja, možete koristiti različite načine za povezivanje gumba s kodom.
Instrukcije
Korak 1
Najčešće su pozivi JavaScript koda vezani za događaj onclick, odnosno za klik na lijevu tipku miša. Ako vam nije potrebno puno koda za opisivanje radnje koja se treba dogoditi, tada se sve to može staviti izravno u oznaku gumba. Na primjer, za programiranje preglednika da prikazuje jednostavnu poruku kad se klikne gumb, JavaScript skripta bi izgledala ovako: alert ('Kôd je uspio!') Potrebna je samo jedna izjava i tekst. Sve se to može lako smjestiti u opis događaja onclick oznake gumba. U ovom slučaju, najjednostavniji HTML kôd stranice može izgledati ovako:
Dugme sa kodom
Dugme sa kodom
Korak 2
Nije praktično smjestiti složeniji JavaScript kôd direktno u oznaku gumba. Lakše je od toga napraviti zasebnu funkciju i staviti njen poziv u događaj onclick. Na primjer, ovo može izgledati kao funkcija koja prikazuje prozor koji sadrži vrijeme klika na gumb: function getTime () {
var sada = novi datum ();
alert ("Kôd je radio u" + now.getHours () + ":" + now.getMinutes ());
} Treba ga staviti u zaglavlje stranice (između i tagova). Kompletni kod stranice sa pozivom na ovu funkciju vezanu za dugme može izgledati ovako:
Dugme za poziv funkcije
funkcija getTime () {
var sada = novi datum ();
alert ("Kôd je radio u" + now.getHours () + ":" + now.getMinutes ());
}
Dugme za poziv funkcije
Korak 3
Istu metodu treba koristiti kada klikom na nekoliko različitih gumba dođe do događaja koji se može opisati istim JavaScript kodom. Na primjer, možete malo izmijeniti prethodnu funkciju kako biste dodali identifikaciju pritisnutog gumba u okvir za poruke: function getTime (btnString) {
var sada = novi datum ();
alert (btnString + "kliknuo" + now.getHours () + ":" + now.getMinutes ());
} Kompletni kod stranice s tri takva gumba može izgledati ovako:
Tri tipke s funkcijskim pozivom
funkcija getTime (btnString) {
var sada = novi datum ();
alert (btnString + "kliknuo" + now.getHours () + ":" + now.getMinutes ());
}
Prvo dugme
Drugo dugme
Treće dugme
