Zrób prosty przycisk przełączania w JavaScript

"Przełącznik”Jest terminem, który odnosi się do możliwości zmiany czegoś między dwoma różnymi stanami lub wartościami. W różnych scenariuszach programiści muszą utworzyć przycisk przełączania na stronie internetowej, na przykład wyświetlanie i ukrywanie treści na stronie, kliknięcie przełącznika, aby przełączać między dwoma stanami, „”NA" I "wyłączony", i tak dalej.

Ten blog opisuje metodę utworzenia prostego przycisku przełączania w JavaScript.

Jak zrobić prosty przycisk przełączania w JavaScript?

Aby zrobić prosty przycisk przełączania, użyj prostej logiki warunkowej za pomocą „wartość„Atrybut, aby zmienić stan lub wartość przycisku.

Przykład 1: Przełączanie stanu przycisku

W pliku HTML utwórz przycisk i załącz „na kliknięcie„Wydarzenie, które wywoła funkcję na przycisku Kliknij:

Zdefiniuj funkcję „przełącznik()”W pliku JavaScript lub znaczniku, który uruchomi się przy przycisku Kliknij:

FunkctionToggle ()

var Button = Dokument.getElementById („btn”);
if (przycisk.wartość == „Akceptuj”)

przycisk.wartość = „odrzuc”;

Elseif (przycisk.wartość == „Odrzuc”)

przycisk.wartość = „Akceptuj”;

W wyżej zdefiniowanej funkcji:

• Najpierw uzyskaj odniesienie przycisku za pomocą przypisanego identyfikatora za pomocą „getElementById ()" metoda.
• Użyj instrukcji warunkowej i zmień wartość lub stan przycisku. Ustaw wartość na „Odrzucić„Jeśli jest to równe„Zaakceptować".
• Jeśli wartość przycisku to „Odrzucić”, Ustaw to na„Zaakceptować".

Wyjście

Przykład 2: Przełączanie stanu przycisku kolorem

Możesz także przełączyć styl z wartością przycisku za pomocą „styl" atrybut:

FunkctionToggle ()

var Button = Dokument.getElementById („btn”);
if (przycisk.wartość == „Akceptuj”)

przycisk.wartość = „odrzuc”;
dokument.getElementById („BTN”).styl.tłem = „czerwony”;

Elseif (przycisk.wartość == „Odrzuc”)

przycisk.wartość = „Akceptuj”;
dokument.getElementById („BTN”).styl.tło = „żółty”;

Jak widać na wyjściu, przycisk zmienia jego wartość i kolor na przycisku Kliknij:

Przykład 3: Przełączanie tekstu

Tutaj przełączymy tekst na przycisku. W pliku HTML najpierw utwórz przycisk i tekst za pomocą

Tag, który nie będzie wyświetlany na stronie:

Witamy w Linuxhint

Zdefiniuj funkcję, która wyświetli tekst na stronie internetowej, klikając przycisk:

FunkctionToggle ()

var text = dokument.getElementById („Witamy”);
if (tekst.styl.display === „Brak”)
tekst.styl.display = „blok”;
w przeciwnym razie
tekst.styl.display = „Brak”;

Wyjście

Zebraliśmy wszystkie niezbędne informacje związane z tworzeniem prostego przycisku przełączania w JavaScript.

Wniosek

Aby stworzyć prosty przycisk przełączający, użyj instrukcji logicznych warunkowych za pomocą „wartość„Atrybut, aby zmienić stan lub wartość przycisku. Przycisk przełączania jest użytecznym elementem interfejsu użytkownika, który może pomóc poprawić funkcjonalność i użyteczność aplikacji JavaScript. Ten blog opisał procedurę utworzenia prostego przycisku przełączania w JavaScript ze szczegółowymi przykładami.