JavaScript po kliknięciu

Michael Zippo

Zdarzenie JavaScript onclick wykonuje funkcję, gdy użytkownik kliknie przycisk lub inny element sieciowy. Ta metoda jest używana zarówno w dokumencie HTML, jak i w dokumencie JavaScript.

Podczas kodowania w JavaScript często zachodzi potrzeba uruchomienia kodu, gdy użytkownik wchodzi w interakcję ze stroną internetową. Na przykład możesz chcieć, aby coś się wydarzyło, gdy użytkownik naciśnie przycisk. Ale jak w JavaScript?

Implementujesz tę funkcjonalność

W tym miejscu może się przydać zdarzenie „onclick ()”. Zdarzenie onclick jest jednym z najczęściej używanych typów zdarzeń. onclick umożliwia uruchamianie kodu, gdy użytkownik kliknie przycisk lub inny element na Twojej stronie internetowej.

W tym krótkim przewodniku wyjaśnimy, jak działa funkcja onclick. Zobaczymy, jak możesz użyć onclick w swoim kodzie, aby uczynić witrynę interaktywną.

Aktualizuj zdarzenia

Onclick to rodzaj zdarzenia JavaScript. Zdarzenia to akcje, które mają miejsce w przeglądarce i mogą być inicjowane przez użytkownika lub przez samą przeglądarkę. Użytkownik klikający przycisk, przesyłający formularz lub naciskający klawisz na klawiaturze to przykłady zdarzeń w akcji. W tym samouczku skupimy się na pierwszym: użytkowniku klikającym element.

Za pomocą zdarzeń programiści mogą uczynić stronę internetową interaktywną. Możesz sprawić, że formularz będzie widoczny, gdy użytkownik kliknie przycisk lub wyświetli komunikat użytkownikowi, gdy prześle formularz.

Istnieją dwa główne składniki zdarzeń: programy obsługi zdarzeń i detektory zdarzeń.

Gdy klikniesz przycisk, naciśniesz klawisz lub najedziesz kursorem na element, zostanie wykonane zdarzenie. Procedura obsługi zdarzeń to kod, który jest wykonywany po uruchomieniu zdarzenia. Na przykład po kliknięciu przycisku uruchamiany jest program obsługi zdarzeń.

Wydarzenie dla słuchaczy jest częścią jesion i md ; przedmiot jak przycisk - "nasłuchuje" i czeka, aż wejdziesz z nim w interakcję. Następnie detektor uruchamia procedurę obsługi zdarzeń.

JavaScript onclick

Zdarzenie JavaScript wykonuje funkcję po kliknięciu przycisku lub innego elementu sieci Web. Na przykład zdarzenie onclick może spowodować wyświetlenie okna dialogowego, gdy stemplujesz przycisk.

Oto składnia metody onclick w HTML:

Kiedy klikniesz przycisk HTML, zostanie wykonana funkcja JavaScript „codetorun”. Możemy używać onclick z innymi elementami, np. div. onclick nie ogranicza się wyłącznie do przycisków.

Możesz także używać onclick w prostym JavaScript. Oto przykład metody JavaScript onclick:

Do pobrania elementu używamy metody JavaScript getElementById naszej strony internetowej. Kiedy klikniemy na element z identyfikatorem „button” zostanie wykonana nasza funkcja onclick.

Przykład przycisku onclick w języku JavaScript

Załóżmy, że chcesz zmodyfikować tekst na stronie internetowej po kliknięcie elementu lub akapitu. Możemy użyć atrybutu onclick, aby zaimplementować tę funkcjonalność na stronie internetowej. Zacznijmy od strony HTML z przyciskiem i tekstem. Utworzymy również plik JavaScript, który będzie zawierał kod naszego wydarzenia.

To jest przykład podstawowej strony internetowej, ale nie jest jeszcze interaktywna. Po uruchomieniu tej strony zobaczymy przycisk i trochę tekstu, ale nic się nie stanie, gdy klikniemy nasz przycisk. Dzieje się tak, ponieważ nie zaimplementowaliśmy jeszcze funkcji skryptu onclick.

Teraz, gdy nasza strona internetowa jest gotowa, my może rozpocząć tworzenie naszego zdarzenia onclick. Najpierw musimy dodać detektor zdarzeń onclick() do naszego przycisku. To zdarzenie będzie nasłuchiwać, gdy użytkownik kliknie przycisk.

Stwórzmy nasz plik „onclick.js”, który będzie zawierał kod dla naszego zdarzenia changeParagraph().To zdarzenie zmieni tekst naszego akapitu (elementu „p”) do czegoś innego.

Zdefiniowaliśmy funkcję JavaScript o nazwie changeParagraph. Używamy metody JavaScript querySelector do wybrania akapitu na naszej stronie. Kiedy po raz pierwszy załadujemy stronę, zobaczymy nasz przycisk i tekst „Ten tekst zmieni się po kliknięciu przycisku”.

Po kliknięciu przycisku nasza strona internetowa zmienia się i pokazuje nasze nowy tekst:

SES9UW5H18rpOrMBgZl2G0rKN LrvhzufnH5bMpX7pd YKpLocGpIBvv9FgaeNxPpoFbLQuJKYqi4cIrWOAGWYrOnN96AJ655kefwbfkk1gCClwg P9I9fQ9G8EQnDUzJw

Więcej zasobów dotyczących nauki języka JavaScript można znaleźć w naszym Przewodnik po JavaScript .

JavaScript po kliknięciu

Aktualizuj zdarzenia

JavaScript onclick

Przykład przycisku onclick w języku JavaScript

Podsumowanie