Hvordan endre etiketttekst ved hjelp av JavaScript

I prosessen med å fylle ut et bestemt skjema eller et spørreskjema, er det ofte situasjoner når det er behov for å vise et bestemt svar eller varsel som svar på det valgte alternativet. For eksempel å håndtere flervalgsspørsmål osv. I slike tilfeller er det veldig nyttig å endre etikettteksten ved hjelp av JavaScript.

Hvordan endre etiketttekst ved hjelp av JavaScript?

Følgende tilnærminger kan brukes til å endre etiketttekst i JavaScript:

• • “indrehtml”Eiendom.
  • “Innertekst”Eiendom.
  • jQuery “tekst()”Og“html ()”Metoder.

Tilnærming 1: Endre etiketttekst i JavaScript ved hjelp av InnerHTML -egenskapen

“indrehtml”Eiendom returnerer det indre HTML -innholdet i et element. Denne egenskapen kan brukes til å hente den spesifikke etiketten og endre teksten til en nyordnede tekstverdi.

Syntaks

element.indrehtml

I syntaks ovenfor:

• • “element”Refererer til elementet som den spesifikke egenskapen vil bli brukt for å returnere HTML -innholdet.

Eksempel

Gå gjennom følgende kodebit for å forklare det uttalte konseptet tydelig:

Dom



Klikk her

• • Først innenfor "”-Kode, inkluder“merkelapp”Med den spesifiserte”id”Og“tekst”Verdier.
  • Etter det, lag en knapp med en vedlagt “ved trykk”Hendelse som påberoper seg funksjonen LabelText ().

Følg nå den undergitte JavaScript-koden:

funksjon labeltxt ()
La få = dokument.getElementById ('Lbl')
få.InnerHTML = "Det forkortede navnet er dokumentobjektmodell";

• • Erklære en funksjon som heter “Labeltext ()”.
  • I sin definisjon får du tilgang til IDen til den spesifiserte “merkelapp" bruker "dokument.getElementById ()”Metode.
  • Til slutt, bruk innerhtml -egenskapen og tilordne en ny “tekst”Verdi til det tilgjengelige etiketten. Dette vil resultere i å transformere etikettteksten til en ny tekstverdi på knappeklikk.

Produksjon

I outputten kan det observeres at tekstverdien til “merkelapp”Endres både på DOM og i koden også i"Elementer" seksjon.

Tilnærming 2: Endre etiketttekst i JavaScript ved bruk

“Innertekst”Eiendom returnerer elementets tekstinnhold. Denne egenskapen kan implementeres for å tildele en brukerinnsatsverdi som er lagt inn i inngangsfeltet til den tildelte etikettens tekst.

Syntaks

element.Innertekst

I syntaks ovenfor:

• • “element”Indikerer elementet som den spesifikke egenskapen vil bli brukt for å returnere det tekstlige innholdet.

Eksempel

Følgende eksempel demonstrerer det uttalte konseptet:

Skriv inn et navn:

N/a

• • Først må du tildele et inngangstekstfelt med det spesifiserte “id”. “null”Verdi her indikerer at verdien vil bli hentet fra brukeren og sette autofullfør til“av”Vil unngå de foreslåtte verdiene.
  • Etter det, inkluderer en etikett som har den spesifiserte “id”Og“tekst”Verdi.

Nå i JavaScript -kodeutdraget, utfør følgende trinn:

funksjon labeltxt ()
La få = dokument.getElementById ('lbl');
La navn = dokument.getElementById ('navn').verdi;
få.innertekst = navn;

• • Definere en funksjon som heter “Labeltext ()”. I sin definisjon får du tilgang til den opprettede etiketten ved å bruke “dokument.getElementById ()”Metode.
  • Tilsvarende, gjenta trinnet ovenfor for å få tilgang til det spesifiserte inngangstekstfeltet og få den brukerinnleggede verdien fra det.
  • Til slutt, tilordne den brukerinnleggede verdien fra forrige trinn til den hentede etiketten. Dette vil endre etikettteksten til den brukerinnleggede verdien i inngangstekstfeltet.

Produksjon

I ovennevnte utgang er det tydelig at ønsket krav oppnås.

Tilnærming 3: Endre etiketttekst i JavaScript ved hjelp av jQuery -teksten () og HTML () -metodene

“tekst()”Metode returnerer tekstinnholdet i de valgte elementene.“html ()”Metode returnerer det indre innholdet i de valgte elementene.

Syntaks

$ (velger).tekst()

I denne syntaksen:

• • “velger”Peker på tekstinnholdet i det tilgjengelige elementet.

$ (velger).html ()

I den ovennevnte syntaks:

• • “velger”Henviser til innerml til det tilgangede elementet.

Eksempel

Dette eksemplet vil illustrere det uttalte konseptet ved hjelp av jQuery -metoder.

Gå gjennom det undergitte kodebiten:

Dette er følgende nettsted:



Innhold:



Klikk for nettstedet
Klikk for innhold

• • For det første, inkluder "jQuery”Bibliotek for å bruke metodene.
  • Etter det, innenfor “”Tag, inkluderer to forskjellige etiketter med den spesifiserte“id”Og tekstverdi mot hver av dem.
  • Tildel også separate knapper til hvert av de opprettede etikettene. Begge knappene vil ha vedlagt “ved trykk”Hendelse som påkaller to forskjellige spesifiserte funksjoner.

Gå gjennom følgende JavaScript -kodelinjer:

funksjon labeltxt ()
$ ('#lbl1').tekst ("Linuxhint")

funksjon labeltext2 ()
$ ('#lbl2').HTML ("JavaScript")

• • I det første trinnet, erklære en funksjon som heter “Labeltext ()”.
  • I sin definisjon får du tilgang til etiketten mot den hentet “id”Og bruk“tekst()”Metode til det. Dette vil resultere i å endre tekstverdien til etiketten til den spesifiserte verdien i parameteren.
  • Tilsvarende definer en funksjon som heter “LabelText2 ()”.
  • Her, på samme måte, gjenta det ovennevnte trinnet for tilgang til etiketten. I dette tilfellet, bruk "html ()”Metode. Denne metoden vil også fungere på samme måte og returnere den spesifiserte tekstverdien og dermed endre etikettteksten.

Produksjon

I output ovenfor tilsvarer den første transformerte tekstverdien til etiketten på dokumentobjektsmodellen (DOM) til jQuery "tekst()”Metode og den andre er et resultat av“html ()”Metode.

Vi har samlet tilnærmingene til å endre etiketttekst ved hjelp av JavaScript.

Konklusjon

“indrehtml”Eiendom,“Innertekst”Eiendom, eller jQuery's“tekst()”Og“html ()”Metoder kan brukes til å endre etiketttekst ved hjelp av JavaScript. Innerhtml -egenskapen kan brukes for å få den spesifikke etiketten og endre tekstinnholdet til en nyordnede tekstverdi. InterText -egenskapen kan implementeres for å tildele en ny tekstverdi til den tilgjengelige etiketten og dermed endre den. JQuery -tilnærmingen kan brukes til å transformere etikettens tekstverdi ved hjelp av de to metodene, noe som resulterer i det samme utfallet i form av to forskjellige tildelte tekstverdier. Denne oppskrivningen demonstrerte teknikkene for å endre etiketttekst ved hjelp av JavaScript.