Składnia wydarzenia OnClick
W html
Tutaj elementy mogą być przyciskiem lub czymś innym. W wydarzeniu OnClick napiszemy skrypt lub funkcję. Wydarzenie OnClick obsługuje prawie wszystkie elementy HTML , , ,
W JS
obiekt.onClick = function () script;W JavaScript przypisamy funkcję do wydarzenia OnClick. W nawiasie napiszemy skrypt, aby wykonać zadanie lub funkcję.
Przykład 1: Onclick zdarzenie, aby zmienić kolor tekstu
Po kliknięciu przycisku na stronie internetowej zdarzenie OnClick wyzwala określone zachowanie. Może się to zdarzyć, gdy przesyłamy formularze lub dane online, gdy modyfikujemy określone treści strony internetowej i inne podobne zdarzenia. Aby ćwiczyć wydarzenie OnClick w prawdziwym otoczeniu, najpierw napiszemy prosty HTML z pewnym stylem.
Utworzyliśmy prostą stronę HTML, na której jest jakiś tekst z przyciskiem. Aby stylizować stronę, użyliśmy niektórych CSS.
Po kliknięciu przycisku zamierzamy zrobić tekst niebieski.
Po napisaniu metody JavaScript w celu zmiany koloru musimy dodać właściwość OnClick do naszego przycisku. Dlatego musimy nieznacznie zmienić nasz HTML:
Dodaliśmy zdarzenie OnClick wewnątrz znacznika przycisku. Przypisaliśmy funkcję o nazwie ChangeColor () do wykonania. W rezultacie musimy utworzyć plik JS, aby zapisać go w pliku JavaScript lub znacznika w pliku HTML. Jednak napiszemy nasz skrypt w pliku HTML.
Najpierw musimy wybrać element, który chcemy zmodyfikować, czyli tekst „zmień kolor” zawarty w obrębie
etykietka. Do osiągnięcia tego osiągnięcia tego osiągnięcia tego osiągnięcia tego osiągnięcia do tego do osiągnięcia do osiągnięcia tego do osiągnięcia do osiągnięcia do tego do osiągnięcia tego do osiągnięcia tego do osiągnięcia tego można użyć DOM Metody DOM GetElementBassName (), GetElementById () lub QuerySelelection () w JavaScript (), można użyć do tego. Wartość jest następnie przypisywana do zmiennej. W tym przykładzie użyjemy QuerySelector (), ponieważ jest bardziej aktualny i szybszy. Dodatkowo zmienne zostaną zadeklarowane za pomocą const. Jest bezpieczniejszy, ponieważ pomaga tworzyć zmienne tylko do odczytu.
Teraz, wewnątrz znacznika skryptu, napiszemy naszą funkcję.
Jak widać powyżej w HTML, funkcją, której będziemy używać, jest ChangeColor (). To jest powód, dla którego ChangeColor jest ustawiony jako nasz identyfikator funkcji (nazwa). Nie będzie działać, jeśli nazwa pasuje do tego, co jest w HTML. W DOM, aby zmienić wszystko związane ze stylem, musisz napisać „styl”, a następnie kropkę (.). Następnie dokonana jest modyfikacja, którą chcesz dokonać, który może być kolor, kolor tła, rozmiar tekstu itp. Aby uzyskać dostęp do naszego tekstu „Zmień kolor”, użyjemy deklarowanej nazwy zmiennej w naszej funkcji, a następnie ustawiamy kolor tekstu na niebieski. Po naciśnięciu przycisku kolor tekstu zmienia się na niebieski:
Dodając więcej kolorów do naszego tekstu, możemy pójść o krok dalej:
Więc chcielibyśmy zrobić pisanie pomarańczowo-czerwonego, zielonego i niebieskiego. Tym razem funkcje HTML OnClick akceptują wartości koloru, który chcemy zastosować do tekstu. W JavaScript są one określane jako parametry. Skonstruujemy funkcję, która akceptuje również jej parametry. Nazwiemy je „kolorem”. Nasza strona internetowa przeszła niewielkie zmiany:
Wybierzmy więc nasz tekst „Zmień kolor” i wprowadźmy kod, aby był pomarańczowo-czerwony, niebieski i zielony:
Kod funkcji najpierw ustawia kolor na wszystko, co zostało dostarczone na wywołania ChangeColor () w przyciskach HTML po odzyskaniu zmiennej nazwy, która została użyta do przechowywania tekstu „Zmień kolor."
Po naciśnięciu jednego z tych przycisków (niebieski, zielony i pomarańczowy) kolor tekstu odpowiednio się zmieni.
Przykład 2: Utwórz alerty za pomocą zdarzenia OnClick
W tym przykładzie utwórzmy przykładową stronę internetową z przyciskiem za pomocą HTML. Po naciśnięciu przycisku otrzymamy wiadomość ostrzegawczą na górze ekranu. Aby utworzyć stronę internetową, użyjemy następującego kodu:
Strona internetowa składająca się z przycisku zostanie utworzona przy użyciu tego kodu:
Teraz musimy napisać funkcję JavaScript, która zostanie wykonana w celu generowania alertów. Utwórzmy funkcję showalert () wewnątrz znaczników skryptu wewnątrz tego samego kodu HTML, jak następujące:
Po napisaniu metody JavaScript w celu zmiany koloru musimy dodać właściwość OnClick do naszego przycisku. Dlatego musimy nieznacznie zmienić nasz HTML:
Aktualizacja tego kodu doda funkcjonalność do przycisku. Gdy użytkownik trafia do przycisku, właściwość OnClick na przycisku powoduje uruchomienie funkcji Showalert (). Użytkownicy klawiatury mogą również korzystać z wydarzenia OnClick. Zawiadomienie zostanie również wysłane, jeśli użytkownik użyje klawisza TAB, aby przejść do przycisku, a następnie naciśnij Enter.
Jak widać powyżej, po naciśnięciu przycisku Show Alert otrzymaliśmy wiadomość ostrzegawczą.
W przypadku elementu przycisku można dodać nowy styl. Aby zmodyfikować wygląd przycisku, gdy użytkownicy myszy nad nim lub zakładka klawiatury, użyj pseudoklasów CSS (: HOVER ,: Focus i: Active).
Powyższy kod stylizuje przycisk. To tylko dla doświadczenia użytkownika. Stylizowanie przycisku nie wpłynie na funkcjonalność przycisku.
Spróbuj kliknąć przycisk po jego stylizacji. Jeśli wszystko pójdzie zgodnie z planem, unoszenie się nad przyciskiem powinno spowodować zmianę w stylu i jak wcześniej naciśnięcie przycisku powinno spowodować, że alert pojawił się z wyświetlonym niestandardowym tekstem. Aby upewnić się, że działa również dla użytkowników klawiatury, przetestuj go teraz bez myszy.
Przykład 3: OnClick Event, aby skopiować tekst
Możemy również skopiować tekst z jednego pola do drugiego, używając wydarzenia OnClick i funkcji JavaScript. Utwórzmy stronę HTML z dwoma wejściowymi pól tekstowych, abyśmy mogli zapisać dane do kopiowania.
Musimy napisać funkcję w tagach skryptów, abyśmy mogli je wywołać za pomocą zdarzenia OnClick w następujący sposób:
Po zaktualizowaniu kodu, po naciśnięciu przycisku zdarzenie OnClick wywoła funkcję copyTxt, a tekst pola Text1 zostanie skopiowany do pola Text2.
Wniosek
W tym samouczku widzieliśmy, że po kliknięciu elementu zdarzenie OnClick umożliwia programistę uruchomienia funkcji JavaScript. Możemy użyć go do wielu różnych funkcji, takich jak komunikaty ostrzegawcze i sprawdzanie poprawności formularzy itp. W tym poście zaimplementowaliśmy trzy przykłady, aby pokazać, jak zmienić kolor tekstu, jak tworzyć alerty i jak kopiować tekst z jednego pola na drugie za pomocą funkcji OnClick i funkcji JavaScript.