„„na kliknięcie”Wydarzenie wykonuje określoną funkcjonalność, gdy użytkownik kliknie element HTML. Działa na wszystkich rodzajach elementów HTML, z wyjątkiem , ,, , ,,, elementy.
„„na kliknięcie„Wydarzenie jest najczęściej używane do wykonywania funkcji JavaScript na przycisku lub kliknięciu elementu. Umożliwia użytkownikom wywołanie funkcji JavaScript i wykonanie określonej akcji.
Ten przewodnik pokaże cel i działanie „na kliknięcie„Wydarzenie w JavaScript.
Jak działa wydarzenie OnClick w JavaScript?
„„na kliknięcie„Zdarzenie umożliwia wykonanie funkcji JavaScript. Zwraca dane wyjściowe funkcji JavaScript, gdy użytkownik kliknie określony element.
Składnia
W powyższej składni:
Poniższa sekcja pokaże działanie „na kliknięcie„Wydarzenie z pomocą różnych przykładów.
Przykład 1: Zastosowanie zdarzenia „OnClick”, aby zmienić kolor tekstu akapitowy
W tym scenariuszu „na kliknięcie„Wydarzenie może być powiązane z„ Kod HTML Najpierw spójrz na następujący kod HTML: Zmień kolor tekstu za pomocą zdarzenia „OnClick”
Kliknij ten akapit, aby zmienić jego kolor.
W powyższym kodzie HTML:
Kod JavaScript
Teraz przejdźmy do bloku kodu JavaScript:
W powyższym bloku kodu:
Wyjście
Wyjście pokazuje zaktualizowany nowy kolor akapitu.
Przykład 2: Zastosowanie zdarzenia „OnClick”, aby zmienić rozmiar czcionki tekstu i kolor tła
Ten przykład dotyczy „na kliknięcie„Wydarzenie, aby dostosować akapit w taki sposób, aby tekst„rozmiar czcionki" I "kolor tła”Akapitu można zmodyfikować na spust zdarzenia.
Kod HTML
Najpierw postępuj zgodnie z danym kodem HTML:
Stuknij ten nagłówek, aby zmienić jego wielkość czcionki i kolor tła
W powyższym kodzie HTML:
Kod JavaScript
Teraz przejdź do następującego kodu JavaScript:
W powyższych wierszach kodu:
Wyjście
Jak widać, „rozmiar czcionki”I„ „kolor tła„Akapitu został zmieniony.
Przykład 3: Zastosowanie zdarzenia „OnClick” w celu skopiowania wartości pola wejściowego
Tutaj "na kliknięcie„Zdarzenie można wykorzystać do kopiowania danych pola wejściowego.
Kod HTML
Najpierw sprawdź podany kod HTML:
W powyższym kodzie HTML:
Kod JavaScript
Teraz przegląd następujący kod JavaScript:
W powyższych wierszach kodu:
Wyjście
Zgodnie z analizą, podane „Hasło„Wartość została skopiowana do„Ponownie wejść”Pole tekstowe na przycisku.
Przykład 4: Zastosowanie zdarzenia „OnClick”, aby wyświetlić bieżącą datę
W tym przykładzie omówiono zdarzenie można wykorzystać do wyświetlania bieżącej daty systemu, odnosząc się do akapitu.
Kod HTML
Przeglądmy następujący kod HTML:
W powyższym kodzie HTML:
Kod JavaScript
Teraz przejdźmy do kodu JavaScript:
W powyższych wierszach kodu:
Wyjście
Powyższe wyjście pokazuje bieżącą datę systemu po kliknięciu przycisku.
Wniosek
JavaScript oferuje wbudowane „na kliknięcie„Wydarzenie, które uruchamia akcję po kliknięciu elementu HTML. Wywołuje funkcję JavaScript, aby wykonać określoną akcję na spust zdarzenia. Można go zaimplementować za pomocą przycisku lub innego elementu HTML, takiego jak „ ”,„