Jak przełączyć przycisk w JavaScript
- Jak przełączyć przycisk w JavaScript?
- Przykład 1: Modyfikowanie wiadomości tekstowych poprzez przełączanie przycisku
- Przykład 2: Włączanie przycisku/wyłączania w JavaScript
Jak przełączyć przycisk w JavaScript?
Instrukcja warunkowa jest podstawowym wymogiem przełączania przycisku w JavaScript. Aby to osiągnąć, musisz uzyskać element, a następnie zastosowano pewną funkcję niestandardową, aby zastosować określoną operację na tym elemencie. Funkcja jest powiązana z zdarzeniem OnClick przycisku. Tak, że za każdym razem, gdy kliknie się przycisk, funkcja ta zostanie wykonana. Przećwiczmy kilka przykładów, aby przełączyć przycisk w JavaScript.
Przykład 1: Modyfikowanie wiadomości tekstowych poprzez przełączanie przycisku
Uważa się, że przykład modyfikowania wiadomości poprzez przełączanie przycisku w JavaScript. Przykład obejmuje kod HTML i JavaScript, który wyjaśniono poniżej:
Kod HTML
Przykład do przełączania przycisku
Naciśnij przycisk, aby zobaczyć magię
W kodzie HTML opis jest następujący:
- A tag jest tworzony z „id = js".
- Następnie przycisk jest tworzony powiązany z „Btntog ()” metoda. Naciskając "Przycisk", metoda "btntog ()”Jest wyzwalany.
- W końcu plik JavaScript "test.JS ” jest przekazywany jako src wtagi.
Kod pliku JavaScript „test.JS”Jest tutaj podane:
Kod JavaScript
functionBtntog ()var t = dokument.getElementById („JS”);
if (t.innerHtml == „Witamy w Linuxhint”)
T.innerHtml = "JavaScript World";
w przeciwnym razie
T.innerHtml = "Witamy w Linuxhint";
W tym kodzie:
- GetElementById jest wykorzystywany do wyodrębnienia elementu HTML ”JS”A wartość jest przechowywana w zmiennej”T".
- Potem InnerHtml nieruchomość jest stosowana w warunkach IF, aby sprawdzić tekst „Witamy w Linuxhint".
- Jeśli warunek jest prawdziwy, treść „Witamy w Linuxhint”Jest zastąpiony „Świat JavaScript".
- Jeśli warunek jest fałszywy, tekst „Witamy w Linuxhint” jest przypisywany jako treść HTML do znacznika div.
Wyjście
Wyjście pokazuje, że przełączenie przycisku zwraca dwie wiadomości jako „Witamy w Linuxhint” I „Świat JavaScript” alternatywnie.
Przykład 2: Włączanie przycisku/wyłączania w JavaScript
Następuje przykład, aby zmienić tekst wbudowany przycisk. W tym przykładzie „Włącz/wyłączony„Tekst alternatywnie zmieni wartość, naciskając przycisk. Podano tutaj kody HTML i JavaScript:
Kod HTML
Przykład do przełączania przycisku
onClick = "tgl ();">
Powyższy kod jest opisany jako:
- Przycisk klikalnego mający identyfikator „MYBTN” jest utworzony, a jego wartość jest ustawiona "WYŁĄCZONY".
- Naciskając przycisk, tgl () Metoda zostanie uruchomiona.
- Na końcu, "test.JS ” jest dołączony do ścieżki źródłowej wewnątrz etykietka.
Kod JavaScript
functiontgl ()var t = dokument.getElementById („myBtn”);
if (t.wartość == "on")
T.wartość = "off";
Elseif (t.wartość == „off”)
T.wartość = "on";
W tym kodzie:
- A tgl () Metoda jest wykorzystywana do przełączania przycisku w JavaScript.
- W tej metodzie wyodrębniasz element HTML, stosując GetElementById właściwość, a następnie dodana do niej instrukcja if-IF.
- Jeśli „Wartość ==”, Przełącz wartość do "WYŁĄCZONY". Jeśli wartość jest WYŁĄCZONY, wtedy wartość zostanie przełączona na „NA".
Wyjście
Wyjście pokazuje, że przycisk został przełączony z WYŁĄCZONY Do NA.
To wszystko! Nauczyłeś się przełączać przycisk w JavaScript.
Wniosek
W JavaScript można użyć przycisku do przełączania między różnymi stanami własnych wartości lub dowolnej funkcji można powiązać z działaniem przełączania. na kliknięcie() zdarzenie przycisku jest powiązane z funkcją. W tym artykule wyjaśniono przegląd przełączania przycisku wraz z dwoma praktycznymi przykładami. Pierwszy przykład wyodrębnia tekst według InnerHtml właściwość i modyfikuje ją za pomocą przycisku przełączania. W drugim przykładzie wartość samego przycisku jest zmieniana za pomocą funkcji niestandardowej.