Podczas tworzenia stron czasami konieczne jest, aby po kliknięciu przycisku umieszczonego na stronie, w przeglądarce wystąpiło zaprogramowane przez autora zdarzenie. Aby to zrobić, musisz umieścić kod JavaScript w wygenerowanym dokumencie i powiązać go z wymaganym przyciskiem. W zależności od ilości kodu wymaganego do zaimplementowania zamierzonego zdarzenia możesz użyć różnych sposobów połączenia przycisku z kodem.
Instrukcje
Krok 1
Najczęściej wywołania kodu JavaScript są powiązane ze zdarzeniem onclick, czyli z kliknięciem lewym przyciskiem myszy. Jeśli nie potrzebujesz dużo kodu do opisania akcji, która ma się wydarzyć, to wszystko możesz umieścić bezpośrednio w tagu przycisku. Na przykład, aby zaprogramować przeglądarkę tak, aby wyświetlała prosty komunikat po kliknięciu przycisku, skrypt JavaScript wyglądałby tak: alert ('Kod działał!') Wymaga tylko jednej instrukcji i tekstu. Wszystko to można łatwo umieścić w opisie zdarzenia onclick tagu przycisku. W takim przypadku najprostszy kod HTML strony może wyglądać tak:
Przycisk z kodem
Przycisk z kodem
Krok 2
Nie jest praktyczne umieszczanie bardziej złożonego kodu JavaScript bezpośrednio w tagu przycisku. Łatwiej jest zrobić z niego osobną funkcję i umieścić jej wywołanie w zdarzeniu onclick. Na przykład może to wyglądać jak funkcja, która pokazuje okno zawierające czas kliknięcia przycisku: function getTime () {
var now = nowa data ();
alert („Kod działał w” + now.getHours () + ":" + now.getMinutes ());
} Należy go umieścić w nagłówku strony (pomiędzy tagami i). Pełny kod strony z wywołaniem tej funkcji powiązany z przyciskiem może wyglądać tak:
Przycisk wywołania funkcji
funkcja getTime () {
var now = nowa data ();
alert („Kod działał w” + now.getHours () + ":" + now.getMinutes ());
}
Przycisk wywołania funkcji
Krok 3
Tę samą metodę należy zastosować, gdy kliknięcie kilku różnych przycisków powinno wywołać zdarzenie, które można opisać tym samym kodem JavaScript. Na przykład możesz nieznacznie zmodyfikować poprzednią funkcję, aby dodać identyfikację wciśniętego przycisku do okna komunikatu: function getTime (btnString) {
var now = nowa data ();
alert (btnString + "kliknięty" + now.getHours () + ":" + now.getMinutes ());
} Pełny kod strony z trzema takimi przyciskami może wyglądać tak:
Trzy przyciski z wywołaniem funkcji
function getTime (btnString) {
var now = nowa data ();
alert (btnString + "kliknięty" + now.getHours () + ":" + now.getMinutes ());
}
Pierwszy przycisk
Drugi przycisk
Trzeci przycisk
