Konkreetse vormi või küsimustiku täitmise käigus tuleb sageli ette olukordi, kus vastuseks valitud valikule on vaja kuvada konkreetne vastus või teatis. Näiteks valikvastustega küsimustega tegelemine jne. Sellistel juhtudel on sildi teksti muutmine JavaScripti abil väga kasulik HTML-vormide juurdepääsetavuse ja üldise dokumendikujunduse parandamisel.
Kuidas muuta sildi teksti JavaScripti abil?
Sildi teksti muutmiseks JavaScriptis saab kasutada järgmisi lähenemisviise.
-
- “ sisemine HTML ” vara.
- “ sisemine Tekst ” vara.
- jQuery' tekst() ” ja „ html() ” meetodid.
1. lähenemisviis: muutke JavaScriptis sildi teksti, kasutades sisemist HTML-i atribuuti
' sisemine HTML ” atribuut tagastab elemendi sisemise HTML-i sisu. Seda atribuuti saab kasutada konkreetse sildi toomiseks ja selle teksti muutmiseks äsja määratud tekstiväärtuseks.
Süntaks
element.innerHTML
Ülaltoodud süntaksis:
-
- “ element ” viitab elemendile, millele konkreetne atribuut selle HTML-i sisu tagastamiseks rakendatakse.
Näide
Esitatud kontseptsiooni selgeks selgitamiseks läbige järgmine koodilõik:
< Keskus >< keha >
< silt id = 'lbl' > DOM silt >
< br >< br >
< nuppu onclick = 'labelText()' > Kliki siia nuppu >
keha > Keskus >
-
- Esiteks, jaotises '
', lisage ' silt ' koos määratud ' id ” ja „ tekst ' väärtused. - Pärast seda looge nupp, millele on lisatud ' onclick ” sündmus, mis kutsub esile funktsiooni labelText().
- Esiteks, jaotises '
Nüüd järgige allolevat JavaScripti koodi:
funktsiooni siltTekst ( ) {lase get = document.getElementById ( 'lbl' )
get.innerHTML= 'Lühendatud nimi on Dokumendiobjekti mudel' ;
}
-
- Deklareerige funktsioon nimega ' silditekst() ”.
- Selle määratluses pääsete juurde määratud ' silt ' kasutades ' document.getElementById() ” meetod.
- Lõpuks rakendage sisemine HTML-i atribuut ja määrake uus ' tekst ” väärtus juurdepääsetavale sildile. Selle tulemuseks on sildi teksti muutmine nupu klõpsamisel uueks tekstiväärtuseks.
Väljund
Ülaltoodud väljundis võib täheldada, et tekstiväärtus ' silt ” on muudetud nii DOM-is kui ka koodis, samuti „ Elemendid ” jaotis.
2. lähenemisviis: muutke JavaScriptis sildi teksti, kasutades atribuuti innerText
' sisemine Tekst ” atribuut tagastab elemendi tekstisisu. Seda atribuuti saab rakendada sisestusväljale sisestatud kasutaja sisestatud väärtuse määramiseks määratud sildi tekstile.
Süntaks
element.innerText
Ülaltoodud süntaksis:
-
- “ element ” tähistab elementi, millele konkreetset omadust rakendatakse selle tekstilise sisu tagastamiseks.
Näide
Järgmine näide demonstreerib esitatud kontseptsiooni:
< Keskus >< keha >Sisestage nimi: < sisend tüüp = 'tekst' id = 'nimi' väärtus = '' automaatne täitmine = 'väljas' >
< lk >< sisend tüüp = 'nupp' id = 'bt' väärtus = 'Muuda sildi teksti' onclick = 'labelText()' > lk >
< silt id = 'lbl' > N / A silt >
keha > Keskus >
-
- Esmalt eraldage sisendtekstiväli, millel on määratud ' id ”. ' null ' väärtus näitab siin, et väärtus tuuakse kasutajalt ja automaatse täitmise seadeks on ' väljas ” väldib soovitatud väärtusi.
- Pärast seda lisage silt, millel on määratud ' id ” ja „ tekst ” väärtus.
Nüüd tehke JavaScripti koodilõigul järgmised toimingud.
funktsiooni siltTekst ( ) {lase get = document.getElementById ( 'lbl' ) ;
lase nimi = document.getElementById ( 'nimi' ) .value;
get.innerText = nimi;
}
-
- Määrake funktsioon nimega ' silditekst() ”. Selle määratluses pääsete loodud sildi juurde, kasutades ' document.getElementById() ” meetod.
- Samamoodi korrake ülaltoodud sammu, et pääseda juurde määratud sisendtekstiväljale ja saada sealt kasutaja sisestatud väärtus.
- Lõpuks määrake toodud sildile kasutaja sisestatud väärtus eelmisest etapist. See muudab sildi teksti sisendteksti väljale kasutaja sisestatud väärtuseks.
Väljund
Ülaltoodud väljundis on ilmne, et soovitud nõue on täidetud.
3. lähenemisviis: muutke JavaScriptis sildi teksti, kasutades meetodeid jQuery text() ja html()
' tekst() ” meetod tagastab valitud elementide tekstisisu. html() ” meetod tagastab valitud elementide sisemise HTML-i sisu.
Süntaks
$ ( valija ) .tekst ( )
Selles süntaksis:
-
- “ valija ” osutab ligipääsetava elemendi tekstisisule.
Ülaltoodud süntaksis:
-
- “ valija ” viitab juurdepääsetava elemendi sisemisele HTML-ile.
Näide
See näide illustreerib esitatud kontseptsiooni jQuery meetodite abil.
Läbige alltoodud koodilõik:
< stsenaarium src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > stsenaarium >< Keskus >< keha >
< silt id = 'lbl1' > See on järgmine veebisait: silt >
< br >< br >
< silt id = 'lbl2' > Sisu: silt >
< br >< br >
< nuppu onclick = 'labelText()' > Klõpsake jaoks Veebisait nuppu >
< nuppu onclick = 'labelText2()' > Klõpsake jaoks Sisu nuppu >
keha > Keskus >
-
- Esiteks lisage ' jQuery ” raamatukogu selle meetodite rakendamiseks.
- Pärast seda jaotises '
', sisaldama kahte erinevat silti määratud ' id ” ja tekstiväärtus igaühe vastu. - Samuti määrake igale loodud sildile eraldi nupud. Mõlemale nupule on lisatud ' onclick ” sündmus, mis kutsub kahte erinevat määratud funktsiooni.
Nüüd minge läbi järgmised JavaScripti koodi read:
funktsiooni siltTekst ( ) {$ ( '#lbl1' ) .tekst ( 'Linux' )
}
funktsiooni siltTekst2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- Esimeses etapis deklareerige funktsioon nimega ' silditekst() ”.
- Selle määratluses pääsete juurde sildile toodud ' id ” ja rakenda „ tekst() ” meetod sellele. Selle tulemusel muudetakse sildi tekstiväärtus selle parameetris määratud väärtuseks.
- Samamoodi määratlege funktsioon nimega ' silditekst2() ”.
- Siin korrake samamoodi ülalkirjeldatud sammu etiketile juurdepääsu saamiseks. Sel juhul rakendage ' html() ” meetod. See meetod töötab samuti samal viisil ja tagastab määratud tekstiväärtuse, muutes seeläbi sildi teksti.
Väljund
Ülaltoodud väljundis vastab dokumendiobjekti mudeli (DOM) sildi esimene teisendatud tekstiväärtus jQueryle. tekst() ” meetod ja teine on meetodi „ html() ” meetod.
Oleme koostanud lähenemisviisid sildi teksti muutmiseks JavaScripti abil.
Järeldus
' sisemine HTML ' vara, ' sisemine Tekst ' atribuut või jQuery ' tekst() ” ja „ html() ” meetodeid saab kasutada sildi teksti muutmiseks JavaScripti abil. Atribuuti innerHTML saab rakendada konkreetse sildi hankimiseks ja selle tekstisisu muutmiseks äsja määratud tekstiväärtuseks. Atribuuti innerText saab rakendada, et määrata juurdepääsetavale sildile uus tekstiväärtus, muutes seda seeläbi. JQuery lähenemisviisi saab kasutada sildi tekstiväärtuse teisendamiseks selle kahe meetodi abil, mille tulemuseks on sama tulemus kahe erineva eraldatud tekstiväärtuse kujul. See kirjutis demonstreeris tehnikaid sildi teksti muutmiseks JavaScripti abil.