Hvordan slå en knapp i JavaScript

Å bytte er et konsept i JavaScript for å endre enhver egenskap til et element alternativt eller navigere til en spesifikk operasjon. JavaScript kan veksle mellom flere egenskaper som bakgrunnsfarge, knapp, tekst og skriftstørrelse. Denne vekslingseffekten kan være assosiert med en knapp som er lettere for klientene å utføre. Dette innlegget har demonstrert måten å bytte en knapp i JavaScript med følgende læringsutbytte:

• Hvordan slå en knapp i JavaScript?
• Eksempel 1: Endre tekstmeldinger ved å slå en knapp
• Eksempel 2: Å bytte av på/på -knapp i JavaScript

Hvordan slå en knapp i JavaScript?

En betinget uttalelse er et grunnleggende krav for å slå en knapp i JavaScript. For å oppnå dette, må du få elementet, og deretter blir det brukt noen tilpasset funksjon for å bruke en viss spesifikk operasjon på det elementet. Funksjonen er tilknyttet onklick -hendelsen på knappen. Slik at denne funksjonen klikker, vil den funksjonen bli utført. La oss øve på noen eksempler for å bytte en knapp i JavaScript.

Eksempel 1: Endre tekstmeldinger ved å slå en knapp

Et eksempel anses å endre en melding ved å slå en knapp i JavaScript. Eksemplet omfatter HTML- og JavaScript -kode, som er forklart nedenfor:

HTML -kode

Eksempel for å bytte en knapp

Trykk på knappen for å se magi
Knapp

I HTML -kode er beskrivelsen som følger:

• EN Tag er opprettet med en “id = js”.
• Etter det opprettes en knapp tilknyttet en “Btntog ()” metode. Ved å trykke "Knapp", metoden "btntog ()”Utløses.
• Til slutt JavaScript -filen "test.JS ” blir passert som src innenforTagger.

Koden for JavaScript -filen “test.JS”Er gitt her:

JavaScript -kode

funksjonBTntog ()

var t = dokument.getElementById ("JS");
hvis (t.indrehtml == "Velkommen til LinuxHint")
t.INNERHTML = "JavaScript World";
ellers
t.InnerHtml = "Velkommen til Linuxhint";

I denne koden:

• getElementById brukes til å trekke ut HTML -elementet “JS”Og verdien lagres i en variabel”t”.
• Etter det, indrehtml Eiendom er ansatt i IF -betingelsen for å sjekke teksten “Velkommen til Linuxhint”.
• Hvis tilstanden er sann, innholdet “Velkommen til Linuxhint”Er erstattet med “JavaScript World“.
• Hvis tilstanden er falsk, teksten “Velkommen til Linuxhint” tildeles som HTML -innhold til DIV -taggen.

Produksjon

Utgangen viser at å bytte en knapp returnerer to meldinger som “Velkommen til Linuxhint” og “JavaScript World” Alternativt.

Eksempel 2: Å bytte av på/på -knapp i JavaScript

Et eksempel blir fulgt for å endre den inline -teksten på knappen. I dette eksemplet "PÅ AV”Tekst vil alternativt endre verdien ved å trykke på knappen. HTML- og JavaScript -kodene er gitt her:

HTML -kode

Eksempel for å bytte en knapp

onClick = "tgl ();">

Ovennevnte kode er beskrevet som:

• En klikkbar knapp som har en ID på “MyBtn” opprettes og verdien er satt til "AV".
• Ved å trykke på knappen, tgl () Metoden vil bli utløst.
• Til slutt, "test.JS ” er festet til kildebanen innenfor stikkord.

JavaScript -kode

funksjonTGL ()

var t = dokument.getElementById ("MyBtn");
hvis (t.verdi == "på")
t.verdi = "off";
elseif (t.verdi == "off")
t.verdi = "på";

I denne koden:

• EN tgl () Metoden brukes til å bytte en knapp i JavaScript.
• I denne metoden trekker du ut HTML -elementet ved å bruke getElementById Eiendom, og deretter blir IF ellers-hvis-uttalelsen lagt til den.
• Hvis “Verdi == ON”, veksle verdien til "AV". Hvis verdien er AV, da vil verdien bli byttet til “PÅ".

Produksjon

Utgangen viser at knappen er slått fra AV til PÅ.

Det er alt! Du har lært å bytte en knapp i JavaScript.

Konklusjon

I JavaScript kan en knapp brukes til å veksle mellom forskjellige tilstander med egne verdier, eller hvilken som helst funksjon kan knyttes til vekslingsoperasjonen. De ved trykk() Hendelse av knappen er tilknyttet funksjonen. Denne artikkelen forklarer en oversikt over å bytte en knapp sammen med to praktiske eksempler. Det første eksemplet trekker ut teksten av indrehtml Eiendom og endrer den gjennom en veksle -knapp. I det andre eksemplet endres verdien av selve knappen ved hjelp av en tilpasset funksjon.