- Jak przełączyć przycisk w JavaScript?
- Przykład 1: Modyfikowanie wiadomości tekstowych poprzez przełączanie przycisku
- Przykład 2: Przełączanie przycisku ON/OFF w JavaScript
Jak przełączyć przycisk w JavaScript?
Instrukcja warunkowa jest podstawowym wymogiem przełączania przycisku w JavaScript. Aby to osiągnąć, musisz pobrać element, a następnie zastosować funkcję niestandardową, aby zastosować określoną operację na tym elemencie. Funkcja jest powiązana ze zdarzeniem onclick przycisku. Tak więc za każdym razem, gdy przycisk zostanie kliknięty, ta funkcja zostanie wykonana. Przećwiczmy kilka przykładów przełączania przycisku w JavaScript.
Przykład 1: Modyfikowanie wiadomości tekstowych poprzez przełączanie przycisku
Przykładem jest zmodyfikowanie wiadomości poprzez przełączenie przycisku w JavaScript. Przykład zawiera kod HTML i JavaScript, które wyjaśniono poniżej:
Kod HTML
< html >
< h2 > Przykład przełączania przycisku < / h2 >
< div ID = 'js' > Naciśnij przycisk, aby zobaczyć magię < / div >
< przycisk na kliknięcie = 'btntog()' > Przycisk < / przycisk >
< / html >
< scenariusz src = 'test.js' >< / scenariusz >
W kodzie HTML opis wygląda następująco:
- A tag jest tworzony z „ id=js ”.
- Następnie tworzony jest przycisk powiązany z „btntog()” metoda. Naciskając 'Przycisk' , metoda ' btntog() ” jest wyzwalany.
- W końcu plik JavaScript „test.js” jest przekazywany jako src w ciągu
Tagi. Kod pliku JavaScript „ test.js ” znajduje się tutaj:
Kod JavaScript
funkcjabtntog ( )
{
gdzie = dokument. getElementById ( 'js' ) ;
jeśli ( t. wewnętrznyHTML == 'Witamy w Linuksiepodpowiedź' ) {
t. wewnętrznyHTML = 'Świat JavaScriptu' ; }
w przeciwnym razie {
t. wewnętrznyHTML = 'Witamy w Linuksiepodpowiedź' ; }
}W tym kodzie:
- getElementById służy do wyodrębnienia elementu HTML „ js ”, a wartość jest przechowywana w zmiennej „ t ”.
- Po tym wewnętrznyHTML nieruchomość jest zatrudniona w przypadku warunku sprawdzenia tekstu „ Witamy w Linuxhint ”.
- Jeśli warunek jest spełniony, treść „ Witamy w Linuxhint ” jest zastąpiony przez „Świat JavaScript” “.
- Jeśli warunek jest fałszywy, tekst „Witamy w Linuxhint” jest przypisywana jako zawartość HTML do znacznika div.
Wyjście
Dane wyjściowe pokazują, że przełączenie przycisku zwraca dwie wiadomości jako „Witamy w Linuxhint” oraz „Świat JavaScriptu” alternatywnie.
Przykład 2: Przełączanie przycisku ON/OFF w JavaScript
Poniżej przedstawiono przykład zmiany tekstu wbudowanego przycisku. W tym przykładzie „ WŁ/WYŁ ” tekst alternatywnie zmieni wartość poprzez naciśnięcie przycisku. Kody HTML i JavaScript znajdują się tutaj:
Kod HTML
< html >
< h2 > Przykład przełączania przycisku h2 >
< typ wejścia = 'przycisk' ID = „moje Btn” wartość = 'WYŁĄCZONY'
na kliknięcie = 'data();' >
< źródło skryptu = 'test.js' > scenariusz >
html >Powyższy kod jest opisany jako:
- Klikalny przycisk mający identyfikator „moje Btn” jest tworzony, a jego wartość jest ustawiona na 'WYŁĄCZONY' .
- Naciskając przycisk, data() zostanie uruchomiona metoda.
- Na końcu, „test.js” jest dołączony do ścieżki źródłowej w obrębie
etykietka.
Kod JavaScript
funkcjatgl ( )
{
gdzie = dokument. getElementById ( „moje Btn” ) ;
jeśli ( t. wartość == 'NA' ) {
t. wartość = 'WYŁĄCZONY' ; }
elseif ( t. wartość == 'WYŁĄCZONY' ) {
t. wartość = 'NA' ; }
}W tym kodzie:
- A data() Metoda służy do przełączania przycisku w JavaScript.
- W tej metodzie wyodrębniasz element HTML, wykorzystując getElementById właściwość, a następnie dodawana jest do niej instrukcja if else-if.
- Jeśli „wartość==WŁ” , przełącz wartość na 'WYŁĄCZONY'. Jeśli wartość to WYŁĄCZONY, wtedy wartość zostanie przełączona na „ NA' .
Wyjście
Dane wyjściowe pokazują, że przycisk został przełączony z WYŁĄCZONY do NA .
To wszystko! Nauczyłeś się przełączać przycisk w JavaScript.
Wniosek
W JavaScript przycisk może służyć do przełączania się między różnymi stanami jego własnych wartości lub dowolna funkcja może być powiązana z operacją przełączania. The na kliknięcie() zdarzenie przycisku jest powiązane z funkcją. W tym artykule wyjaśniono omówienie przełączania przycisku wraz z dwoma praktycznymi przykładami. Pierwszy przykład wyodrębnia tekst przez wewnętrznyHTML właściwość i modyfikuje ją za pomocą przycisku przełączania. W drugim przykładzie wartość samego przycisku jest zmieniana za pomocą funkcji niestandardowej.