Lag en enkel vippeknapp i JavaScript

“Veksle”Er et begrep som refererer til muligheten til å bytte noe mellom to forskjellige tilstander eller verdier. I forskjellige scenarier trenger utviklere å opprette en veksle -knapp på en webside, for eksempel å vise og skjule innhold på en side, klikke på vekslingen til veksling mellom to tilstander, "på”Og“av", og så videre.

Denne bloggen vil beskrive metoden for å lage en enkel vippeknapp i JavaScript.

Hvordan lage en enkel vippeknapp i JavaScript?

For å lage en enkel vippeknapp, bruk den enkle betingede logikken med "verdi”Attributt for å endre tilstanden eller verdien på knappen.

Eksempel 1: Å veksle knappens tilstand

I en HTML -fil, oppretter du en knapp og legger ved en "ved trykk”Hendelse som vil kalle funksjonen på et knappeklikk:

Definere en funksjon “veksle()”I JavaScript -fil eller taggen som vil utløse på knappeklikk:

FunctionToggle ()

var knapp = dokument.getElementById ("BTN");
hvis (knapp.verdi == "godta")

knapp.verdi = "Avvis";

elseif (knapp.verdi == "Avvis")

knapp.verdi = "godta";

I den ovennevnte funksjonen:

• Først må du få knappreferansen ved å bruke den tildelte ID -en ved hjelp av "getElementById ()”Metode.
• Bruk den betingede setningen og endre verdien eller tilstanden til knappen. Sett verdien til “Avvise”Hvis det er lik“Aksepterer”.
• Hvis knappens verdi er "Avvise”, Sett den til“Aksepterer”.

Produksjon

Eksempel 2: Å veksle knappens tilstand med farge

Du kan også veksle stilen med verdien av knappen ved å bruke “stil" Egenskap:

FunctionToggle ()

var knapp = dokument.getElementById ("BTN");
hvis (knapp.verdi == "godta")

knapp.verdi = "Avvis";
dokument.getElementById ("BTN").stil.bakgrunn = "rød";

elseif (knapp.verdi == "Avvis")

knapp.verdi = "godta";
dokument.getElementById ("BTN").stil.bakgrunn = "gul";

Som du kan se i utgangen, endrer knappen dens verdi og farge på knappeklikk:

Eksempel 3: Å veksle teksten

Her vil vi veksle teksten på knappeklikket. I en HTML -fil, først, lag en knapp og en tekst ved hjelp av

Tag som ikke vises på siden:

Velkommen til Linuxhint

Definer en funksjon som viser teksten på websiden ved å klikke på knappen:

FunctionToggle ()

var tekst = dokument.getElementById ("Velkommen");
hvis (tekst.stil.display === 'ingen')
tekst.stil.display = 'blokk';
annet
tekst.stil.display = 'ingen';

Produksjon

Vi har samlet all den essensielle informasjonen relatert til å lage en enkel vippeknapp i JavaScript.

Konklusjon

For å lage en enkel vippeknapp, bruk de betingede logiske utsagnene med "verdi”Attributt for å endre tilstanden eller verdien på knappen. En vippeknapp er et nyttig brukergrensesnitt som kan bidra til å forbedre funksjonaliteten og brukervennligheten til JavaScript -applikasjoner. Denne bloggen beskrev prosedyren for å opprette en enkel vippeknapp i JavaScript med detaljerte eksempler.