Sivuja luodessa on joskus välttämätöntä, että kun napsautat sivulle sijoitettua painiketta, selaimessa tapahtuu jokin tekijän ohjelmoima tapahtuma. Tätä varten sinun on lisättävä JavaScript-koodi luotuun asiakirjaan ja sidottava se tarvittavaan painikkeeseen. Aiotun tapahtuman toteuttamiseen tarvittavan koodimäärän mukaan voit yhdistää painikkeen koodiin eri tavoin.
Ohjeet
Vaihe 1
Useimmiten JavaScript-koodikutsut sidotaan onclick-tapahtumaan, ts. Hiiren vasemman painikkeen napsautukseen. Jos et tarvitse paljon koodia tapahtuman kuvaamiseksi, kaikki se voidaan sijoittaa suoraan painiketunnisteeseen. Esimerkiksi, jos haluat ohjelmoida selaimen näyttämään yksinkertaisen viestin, kun painiketta painetaan, JavaScript-komentosarja näyttää tältä: alert ('Koodi toimi!') Se vie vain yhden lauseen ja tekstin. Kaikki tämä voidaan helposti sijoittaa painiketunnisteen onclick-tapahtuman kuvaukseen. Tässä tapauksessa sivun yksinkertaisin HTML-koodi saattaa näyttää tältä:
Painike koodilla
Painike koodilla
Vaihe 2
Ei ole käytännöllistä sijoittaa monimutkaisempaa JavaScript-koodia suoraan painiketagiin. On helpompaa tehdä siitä erillinen toiminto ja laittaa kutsu onclick-tapahtumaan. Esimerkiksi tämä saattaa näyttää toiminnolta, joka näyttää ikkunan, joka sisältää painikkeen napsautuksen ajan: funktio getTime () {
var now = uusi päivämäärä ();
hälytys ("Koodi toimi" + now.getHours () + ":" + now.getMinutes ());
} Se on sijoitettava sivun otsikkoon (ja -tagien väliin). Sivun täydellinen koodi, jossa kutsu tähän toimintoon on sidottu painikkeeseen, voi näyttää tältä:
Toimintopainike
funktio getTime () {
var now = uusi päivämäärä ();
hälytys ("Koodi toimi" + now.getHours () + ":" + now.getMinutes ());
}
Toimintopainike
Vaihe 3
Samaa menetelmää tulisi käyttää, kun napsauttamalla useita eri painikkeita pitäisi nousta tapahtuma, joka voidaan kuvata samalla JavaScript-koodilla. Voit esimerkiksi muokata edellistä toimintoa hiukan lisätäksesi painetun painikkeen tunnisteen viestiruutuun: function getTime (btnString) {
var now = uusi päivämäärä ();
hälytys (btnString + "napsautti" + now.getHours () + ":" + now.getMinutes ());
} Kolmen tällaisen painikkeen sisältävän sivun täydellinen koodi saattaa näyttää tältä:
Kolme toimintopainiketta
funktio getTime (btnString) {
var now = uusi päivämäärä ();
hälytys (btnString + "napsautti" + now.getHours () + ":" + now.getMinutes ());
}
Ensimmäinen painike
Toinen painike
Kolmas painike
