Prilikom izrade stranica ponekad je potrebno da se, kada kliknete na gumb smješten na stranici, u pregledniku 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.
Upute
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 tako da prikazuje jednostavnu poruku kad se klikne gumb, JavaScript skripta bi izgledala ovako: alert ('Kôd je uspio!') Potreban je samo jedan iskaz 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:
Gumb s kodom
Gumb s kodom
Korak 2
Nije praktično smjestiti složeniji JavaScript kôd izravno u oznaku gumba. Lakše je od toga napraviti zasebnu funkciju i staviti njezin 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 oznaka i). Kompletni kod stranice s pozivom na ovu funkciju vezanu za gumb može izgledati ovako:
Tipka za poziv funkcije
funkcija getTime () {
var sada = novi datum ();
alert ("Kôd je radio u" + now.getHours () + ":" + now.getMinutes ());
}
Tipka za poziv funkcije
3. korak
Istu metodu treba koristiti kada bi klikanje nekoliko različitih gumba izazvalo događaj 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 kôd 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 ());
}
Prvi gumb
Drugi gumb
Treći gumb
