Oldalak létrehozásakor néha szükség van arra, hogy az oldalra helyezett gombra kattintva a böngészőben bekövetkezzen a szerző által programozott esemény. Ehhez el kell helyeznie a JavaScript kódot a létrehozott dokumentumba, és hozzá kell kötnie a szükséges gombra. A tervezett esemény megvalósításához szükséges kódmennyiségtől függően különböző módon csatlakoztathatja a gombot a kódhoz.
Utasítás
1. lépés
Leggyakrabban a JavaScript kódhívások az onclick eseményhez vannak kötve, vagyis a bal egérgombbal történő kattintáshoz. Ha nem kell sok kód a végrehajtandó művelet leírásához, akkor mindez közvetlenül a gombcímkébe helyezhető. Például ahhoz, hogy a böngészőt úgy programozzuk, hogy egyszerű üzenetet jelenítsen meg, amikor egy gombra kattintunk, a JavaScript szkript a következőképpen néz ki: alert ('A kód működött!') Csak egy utasítás és szöveg szükséges. Mindez könnyen elhelyezhető a gombcímke onclick eseményleírásában. Ebben az esetben az oldal legegyszerűbb HTML-kódja így nézhet ki:
Gomb kóddal
Gomb kóddal
2. lépés
Nem célszerű bonyolultabb JavaScript-kódot elhelyezni közvetlenül a gombcímkében. Könnyebb külön függvényt létrehozni belőle, és az onclick eseménybe beírni a hívását. Például ez olyan funkciónak tűnhet, amely egy ablakot jelenít meg, amely a gomb kattintásának idejét tartalmazza: function getTime () {
var now = új dátum ();
figyelmeztetés ("A kód a" + now.getHours () + "könyvtárban működött:" + now.getMinutes ());
} Helyezni kell az oldal fejlécébe (a és a tagek közé). Az oldal teljes kódja, amelyhez a funkcióhoz a gombhoz kötött hívás tartozik, így nézhet ki:
Funkcióhívás gomb
függvény getTime () {
var now = új dátum ();
figyelmeztetés ("A kód a" + now.getHours () + "könyvtárban működött:" + now.getMinutes ());
}
Funkcióhívás gomb
3. lépés
Ugyanazt a módszert kell használni, amikor több különböző gombra kattintva olyan eseményt kell előidézni, amelyet ugyanazzal a JavaScript-kóddal lehet leírni. Például kissé módosíthatja az előző függvényt, hogy a megnyomott gomb azonosítóját hozzáadja az üzenetmezőhöz: function getTime (btnString) {
var now = új dátum ();
figyelmeztetés (btnString + "rákattintott a" + now.getHours () + ":" + now.getMinutes () elemre);
} A három ilyen gombbal rendelkező oldal teljes kódja így nézhet ki:
Három gomb funkcióhívással
függvény getTime (btnString) {
var now = új dátum ();
figyelmeztetés (btnString + "rákattintott a" + now.getHours () + ":" + now.getMinutes () elemre);
}
Első gomb
Második gomb
Harmadik gomb
