När du skapar sidor är det ibland nödvändigt att någon händelse som programmerats av författaren inträffar i webbläsaren när du klickar på knappen på sidan. För att göra detta måste du placera JavaScript-kod i det genererade dokumentet och binda den till önskad knapp. Beroende på mängden kod som krävs för att implementera den avsedda händelsen kan du använda olika sätt att ansluta knappen till koden.
Instruktioner
Steg 1
Oftast är JavaScript-kodsamtal bundna till onclick-händelsen, det vill säga genom att klicka på vänster musknapp. Om du inte behöver mycket kod för att beskriva åtgärden som måste hända, kan allt placeras direkt i knapptaggen. Till exempel, för att programmera webbläsaren så att den visar ett enkelt meddelande när man klickar på en knapp skulle JavaScript-skriptet se ut så här: alert ('Koden fungerade!') Det tar bara ett uttalande och en text. Allt detta kan enkelt placeras i onclick-händelsebeskrivningen för knapptaggen. I det här fallet kan den enklaste HTML-koden på sidan se ut så här:
Knapp med kod
Knapp med kod
Steg 2
Det är inte praktiskt att placera mer komplex JavaScript-kod direkt i knapptaggen. Det är lättare att göra en separat funktion av den och lägga sitt samtal i onclick-händelsen. Detta kan till exempel se ut som en funktion som visar ett fönster som innehåller tiden för en knappklickning: funktion getTime () {
var nu = nytt datum ();
alert ("Koden fungerade i" + now.getHours () + ":" + now.getMinutes ());
} Den ska placeras i sidhuvudet (mellan taggarna och). Den fullständiga koden på sidan med ett samtal till den här funktionen bunden till knappen kan se ut så här:
Funktionsknapp
funktion getTime () {
var nu = nytt datum ();
alert ("Koden fungerade i" + now.getHours () + ":" + now.getMinutes ());
}
Funktionsknapp
Steg 3
Samma metod bör användas när man klickar på flera olika knappar för att höja en händelse som kan beskrivas med samma JavaScript-kod. Du kan till exempel ändra den tidigare funktionen något för att lägga till identifieringen av den tryckta knappen i meddelandefältet: funktion getTime (btnString) {
var nu = nytt datum ();
varning (btnString + "klickade in" + nu.getHours () + ":" + nu.getMinutes ());
} Hela koden för en sida med tre sådana knappar kan se ut så här:
Tre knappar med funktionssamtal
funktion getTime (btnString) {
var nu = nytt datum ();
varning (btnString + "klickade in" + nu.getHours () + ":" + nu.getMinutes ());
}
Första knappen
Andra knappen
Tredje knappen
