Při vytváření stránek je někdy nutné, aby po kliknutí na tlačítko umístěné na stránce došlo v prohlížeči k nějaké události naprogramované autorem. Chcete-li to provést, musíte do generovaného dokumentu umístit kód JavaScript a svázat jej s požadovaným tlačítkem. V závislosti na množství kódu, které je požadováno k provedení zamýšlené události, můžete použít různé způsoby připojení tlačítka k kódu.
Instrukce
Krok 1
Nejčastěji jsou volání kódu JavaScript vázána na událost onclick, tj. Na kliknutí levým tlačítkem myši. Pokud nepotřebujete mnoho kódu k popisu akce, která se musí stát, pak je vše možné umístit přímo do značky tlačítka. Například pro naprogramování prohlížeče tak, aby po kliknutí na tlačítko zobrazil jednoduchou zprávu, by skript JavaScriptu vypadal takto: alert ('Code pracoval!') Trvá to jen jeden příkaz a text. To vše lze snadno umístit do popisu události tlačítka onclick značky tlačítka. V takovém případě může nejjednodušší HTML kód stránky vypadat takto:
Tlačítko s kódem
Tlačítko s kódem
Krok 2
Není praktické umisťovat složitější kód JavaScript přímo do tagu tlačítka. Je snazší z toho vytvořit samostatnou funkci a zavolat do události onclick. Například to může vypadat jako funkce, která zobrazuje okno obsahující čas kliknutí na tlačítko: funkce getTime () {
var now = nové datum ();
alert ("Kód pracoval v" + now.getHours () + ":" + now.getMinutes ());
} Měl by být umístěn v záhlaví stránky (mezi značkami a). Celý kód stránky s voláním této funkce vázané na tlačítko může vypadat takto:
Tlačítko volání funkce
funkce getTime () {
var now = nové datum ();
alert ("Kód pracoval v" + now.getHours () + ":" + now.getMinutes ());
}
Tlačítko volání funkce
Krok 3
Stejná metoda by měla být použita při kliknutí na několik různých tlačítek by měla vyvolat událost, kterou lze popsat pomocí stejného kódu JavaScriptu. Můžete například mírně upravit předchozí funkci a přidat tak identifikaci stisknutého tlačítka do okna se zprávou: funkce getTime (btnString) {
var now = nové datum ();
alert (btnString + "kliknuto" + now.getHours () + ":" + now.getMinutes ());
} Celý kód stránky se třemi takovými tlačítky může vypadat takto:
Tři tlačítka s voláním funkce
funkce getTime (btnString) {
var now = nové datum ();
alert (btnString + "kliknuto" + now.getHours () + ":" + now.getMinutes ());
}
První tlačítko
Druhé tlačítko
Třetí tlačítko
