U procesu popunjavanja pojedinog obrasca ili upitnika česte su situacije kada je potrebno prikazati određeni odgovor ili obavijest kao odgovor na odabranu opciju. Na primjer, rješavanje pitanja s višestrukim izborom, itd. U takvim slučajevima, promjena teksta oznake pomoću JavaScripta vrlo je korisna u poboljšanju pristupačnosti HTML obrazaca i cjelokupnog dizajna dokumenta.
Kako promijeniti tekst naljepnice pomoću JavaScripta?
Sljedeći pristupi mogu se koristiti za promjenu teksta oznake u JavaScriptu:
-
- “ unutarnjiHTML ” vlasništvo.
- “ unutarnjiTekst ” vlasništvo.
- jQuery “ tekst() ' i ' html() ” metode.
Pristup 1: Promjena teksta oznake u JavaScriptu pomoću svojstva innerHTML
' unutarnjiHTML ” svojstvo vraća unutarnji HTML sadržaj elementa. Ovo se svojstvo može koristiti za dohvaćanje određene oznake i promjenu njenog teksta u novododijeljenu tekstualnu vrijednost.
Sintaksa
element.innerHTML
U gornjoj sintaksi:
-
- “ element ” odnosi se na element na koji će se primijeniti određeno svojstvo da vrati njegov HTML sadržaj.
Primjer
Prođite kroz sljedeći isječak koda kako biste jasno objasnili navedeni koncept:
< centar >< tijelo >
< označiti iskaznica = 'lbl' > DOM označiti >
< br >< br >
< dugme na klik = 'labelText()' > Kliknite ovdje dugme >
tijelo > centar >
-
- Prvo, unutar '
', uključite ' označiti ” s navedenim “ iskaznica ' i ' tekst ” vrijednosti. - Nakon toga izradite gumb s priloženim ' na klik ” događaj koji poziva funkciju labelText().
- Prvo, unutar '
Sada slijedite dolje navedeni JavaScript kôd:
funkcija labelText ( ) {neka get = document.getElementById ( 'lbl' )
get.innerHTML= 'Skraćeni naziv je Document Object Model' ;
}
-
- Deklarirajte funkciju pod nazivom ' labelText() ”.
- U njegovoj definiciji pristupite ID-u navedenog ' označiti ' koristiti ' document.getElementById() ” metoda.
- Na kraju primijenite svojstvo innerHTML i dodijelite novi ' tekst ” vrijednost oznaci kojoj se pristupa. To će rezultirati transformacijom teksta oznake u novu vrijednost teksta nakon klika na gumb.
Izlaz
U gornjem izlazu može se uočiti da tekstualna vrijednost ' označiti ” mijenja se i na DOM-u i u kodu, kao i u “ Elementi ” odjeljak.
Pristup 2: Promjena teksta oznake u JavaScriptu pomoću svojstva innerText
' unutarnjiTekst ” svojstvo vraća tekstualni sadržaj elementa. Ovo se svojstvo može implementirati za dodjelu vrijednosti korisničkog unosa unesene u polje za unos tekstu dodijeljene oznake.
Sintaksa
element.innerText
U gornjoj sintaksi:
-
- “ element ” označava element na koji će se specifično svojstvo primijeniti da bi se vratio njegov tekstualni sadržaj.
Primjer
Sljedeći primjer demonstrira navedeni koncept:
< centar >< tijelo >Unesite ime: < ulazni tip = 'tekst' iskaznica = 'Ime' vrijednost = '' automatsko dovršavanje = 'isključeno' >
< str >< ulazni tip = 'dugme' iskaznica = 'bt' vrijednost = 'Promijeni tekst naljepnice' na klik = 'labelText()' > str >
< označiti iskaznica = 'lbl' > N / A označiti >
tijelo > centar >
-
- Prvo dodijelite tekstualno polje za unos s navedenim ' iskaznica ”. ' ništavan ' vrijednost ovdje označava da će vrijednost biti dohvaćena od korisnika i postavljanje automatskog dovršavanja na ' isključeno ” izbjeći će predložene vrijednosti.
- Nakon toga uključite oznaku koja ima naveden ' iskaznica ' i ' tekst ” vrijednost.
Sada u isječku JavaScript koda izvedite sljedeće korake:
funkcija labelText ( ) {neka get = document.getElementById ( 'lbl' ) ;
neka naziv = dokument.getElementById ( 'Ime' ) .vrijednost;
get.innerText = ime;
}
-
- Definirajte funkciju pod nazivom ' labelText() ”. U njegovoj definiciji, pristupite kreiranoj oznaci pomoću ' document.getElementById() ” metoda.
- Slično, ponovite gornji korak da biste pristupili navedenom tekstualnom polju za unos i iz njega dobili vrijednost koju je unio korisnik.
- Na kraju, dohvaćenoj oznaci dodijelite vrijednost koju je unio korisnik iz prethodnog koraka. Ovo će promijeniti tekst oznake u vrijednost koju je unio korisnik u polje za unos teksta.
Izlaz
U gornjem rezultatu vidljivo je da je željeni zahtjev postignut.
Pristup 3: Promjena teksta oznake u JavaScriptu pomoću metoda jQuery text() i html()
' tekst() ' vraća tekstualni sadržaj odabranih elemenata. ' html() ” metoda vraća innerHTML sadržaj odabranih elemenata.
Sintaksa
$ ( selektor ) .tekst ( )
U ovoj sintaksi:
-
- “ selektor ” pokazuje na tekstualni sadržaj elementa kojem se pristupa.
U gore navedenoj sintaksi:
-
- “ selektor ” odnosi se na innerHTML elementa kojem se pristupa.
Primjer
Ovaj primjer će ilustrirati navedeni koncept korištenjem jQuery metoda.
Prođite kroz dolje navedeni isječak koda:
< skripta src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > skripta >< centar >< tijelo >
< označiti iskaznica = 'lbl1' > Ovo je sljedeća web stranica: označiti >
< br >< br >
< označiti iskaznica = 'lbl2' > Sadržaj: označiti >
< br >< br >
< dugme na klik = 'labelText()' > Klik za Web stranica dugme >
< dugme na klik = 'labelText2()' > Klik za Sadržaj dugme >
tijelo > centar >
-
- Prvo uključite ' jQuery ” za primjenu svojih metoda.
- Nakon toga, unutar “
” uključuje dvije različite oznake s navedenim “ iskaznica ” i tekstualnu vrijednost za svaku od njih. - Također, dodijelite zasebne gumbe svakoj od stvorenih oznaka. Oba gumba će imati priloženu ' na klik ” događaj koji poziva dvije različite navedene funkcije.
Sada prođite kroz sljedeće retke JavaScript koda:
funkcija labelText ( ) {$ ( '#lbl1' ) .tekst ( 'Linux' )
}
funkcija labelText2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- U prvom koraku deklarirajte funkciju pod nazivom ' labelText() ”.
- U svojoj definiciji, pristupite oznaci naspram dohvaćenog ' iskaznica ' i primijenite ' tekst() ” metoda za to. To će rezultirati promjenom tekstualne vrijednosti oznake na navedenu vrijednost u njenom parametru.
- Slično, definirajte funkciju pod nazivom ' labelText2() ”.
- Ovdje, na sličan način, ponovite gore opisani korak za pristup naljepnici. U tom slučaju primijenite ' html() ” metoda. Ova metoda također će raditi na isti način i vratiti navedenu tekstualnu vrijednost mijenjajući tako tekst oznake.
Izlaz
U gornjem izlazu, prva transformirana tekstualna vrijednost oznake na Document Object Model (DOM) odgovara jQuery “ tekst() ', a drugi je rezultat metode ' html() ” metoda.
Sastavili smo pristupe za promjenu teksta naljepnice pomoću JavaScripta.
Zaključak
' unutarnjiHTML ' vlasništvo, ' unutarnjiTekst ', ili jQueryjevo ' tekst() ' i ' html() ” metode se mogu koristiti za promjenu teksta oznake pomoću JavaScripta. Svojstvo innerHTML može se primijeniti za dobivanje određene oznake i promjenu njezinog tekstualnog sadržaja u novododijeljenu tekstualnu vrijednost. Svojstvo innerText može se implementirati za dodjelu nove tekstualne vrijednosti oznaci kojoj se pristupa i time je promijeniti. Pristup jQuery može se koristiti za transformaciju tekstualne vrijednosti oznake uz pomoć svoje dvije metode što rezultira istim ishodom u obliku dvije različite dodijeljene tekstualne vrijednosti. Ovaj tekst demonstrira tehnike za promjenu teksta naljepnice pomoću JavaScripta.