JavaScript po kliknięciu

| | | |

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 < / figure>

Podsumowanie

Ogólnie rzecz biorąc, kod, który umożliwia prowadzenie wydarzenia w sieci, po kliknięciu klikasz na stronie.

To to jest to! Korzystając z powyższego kodu, pomyślnie stworzyliśmy stronę internetową, która uruchomi kod po naciśnięciu przycisku. Chociaż powyższy kod zmienia tylko tekst, możesz go dowolnie skomplikować lub uprościć.

Jeśli chcesz, aby użytkownik był powiadamiany o kliknięciu przycisku, możesz użyć funkcji alertu () w JavaScript. Jeśli chcesz dodać deklaracje „if” w swoim kodzie, możesz również

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

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method