Pri ustvarjanju strani je včasih nujno, da se ob kliku na gumb na strani v brskalniku zgodi kakšen dogodek, ki ga je programiral avtor. Če želite to narediti, morate v ustvarjeni dokument vstaviti kodo JavaScript in jo povezati z zahtevanim gumbom. Glede na količino kode, ki je potrebna za izvedbo predvidenega dogodka, lahko na različne načine povežete gumb s kodo.
Navodila
Korak 1
Najpogosteje so klici kode JavaScript vezani na dogodek onclick, to je na klik na levi gumb miške. Če za opis dejanja, ki se mora zgoditi, ne potrebujete veliko kode, lahko vso to postavite neposredno v oznako gumba. Na primer, če želite programirati brskalnik tako, da pri kliku gumba prikaže preprosto sporočilo, bi bil skript JavaScript videti takole: opozorilo ('Koda je delovala!') Potrebujete le en stavek in besedilo. Vse to lahko enostavno umestite v opis dogodka onclick oznake gumba. V tem primeru je lahko najenostavnejša HTML koda strani videti tako:
Gumb s kodo
Gumb s kodo
2. korak
Bolj zapleteno kodo JavaScript ni praktično umestiti neposredno v oznako gumba. Iz nje je lažje narediti ločeno funkcijo in njen klic postaviti v dogodek onclick. Na primer, to lahko izgleda kot funkcija, ki prikazuje okno, ki vsebuje čas klika gumba: function getTime () {
var zdaj = nov datum ();
alert ("Koda je delovala v" + now.getHours () + ":" + now.getMinutes ());
} Vstaviti naj bo v glavo strani (med oznakama in). Celotna koda strani s klicem te funkcije, vezane na gumb, je lahko videti takole:
Gumb za klic funkcije
funkcija getTime () {
var zdaj = nov datum ();
alert ("Koda je delovala v" + now.getHours () + ":" + now.getMinutes ());
}
Gumb za klic funkcije
3. korak
Enako metodo je treba uporabiti, če bi s klikom več različnih gumbov sprožili dogodek, ki ga lahko opišemo z isto kodo JavaScript. Na primer, lahko nekoliko spremenite prejšnjo funkcijo, da v polje za sporočila dodate identifikacijo pritisnjenega gumba: function getTime (btnString) {
var zdaj = nov datum ();
opozorilo (btnString + "kliknjeno v" + now.getHours () + ":" + now.getMinutes ());
} Celotna koda za stran s tremi takimi gumbi bi lahko izgledala tako:
Trije gumbi s funkcijskim klicem
funkcija getTime (btnString) {
var zdaj = nov datum ();
opozorilo (btnString + "kliknjeno v" + now.getHours () + ":" + now.getMinutes ());
}
Prvi gumb
Drugi gumb
Tretji gumb
