నిర్దిష్ట ఫారమ్ లేదా ప్రశ్నాపత్రాన్ని పూరించే ప్రక్రియలో, ఎంచుకున్న ఎంపికకు ప్రతిస్పందనగా నిర్దిష్ట సమాధానం లేదా నోటిఫికేషన్‌ను ప్రదర్శించాల్సిన అవసరం ఉన్నప్పుడు తరచుగా పరిస్థితులు ఉన్నాయి. ఉదాహరణకు, బహుళ-ఎంపిక ప్రశ్నలు మొదలైనవాటితో వ్యవహరించడం. అలాంటి సందర్భాలలో, జావాస్క్రిప్ట్‌ని ఉపయోగించి లేబుల్ టెక్స్ట్‌ను మార్చడం HTML ఫారమ్‌ల యాక్సెసిబిలిటీని మరియు మొత్తం డాక్యుమెంట్ డిజైన్‌ను మెరుగుపరచడంలో చాలా సహాయకారిగా ఉంటుంది.
జావాస్క్రిప్ట్ ఉపయోగించి లేబుల్ వచనాన్ని ఎలా మార్చాలి?
జావాస్క్రిప్ట్‌లో లేబుల్ వచనాన్ని మార్చడానికి క్రింది విధానాలను ఉపయోగించవచ్చు:
-
- ' అంతర్గత HTML ”ఆస్తి.
- ' అంతర్గత వచనం ”ఆస్తి.
- j క్వెరీ ' వచనం() 'మరియు' html() ” పద్ధతులు.
విధానం 1: అంతర్గత HTML ప్రాపర్టీని ఉపయోగించి జావాస్క్రిప్ట్‌లో లేబుల్ వచనాన్ని మార్చండి
ది ' అంతర్గత HTML ”ప్రాపర్టీ మూలకం యొక్క అంతర్గత HTML కంటెంట్‌ని అందిస్తుంది. నిర్దిష్ట లేబుల్‌ని పొందడానికి మరియు దాని వచనాన్ని కొత్తగా కేటాయించిన వచన విలువకు మార్చడానికి ఈ ప్రాపర్టీని ఉపయోగించవచ్చు.
వాక్యనిర్మాణం
element.innerHTML
పై వాక్యనిర్మాణంలో:
-
- ' మూలకం ” అనేది దాని HTML కంటెంట్‌ను తిరిగి ఇవ్వడానికి నిర్దిష్ట ఆస్తిని వర్తించే మూలకాన్ని సూచిస్తుంది.
ఉదాహరణ
పేర్కొన్న భావనను స్పష్టంగా వివరించడానికి క్రింది కోడ్ స్నిప్పెట్ ద్వారా వెళ్ళండి:
< కేంద్రం >< శరీరం >
< లేబుల్ id = 'lbl' > DOM లేబుల్ >
< br >< br >
< బటన్ క్లిక్ చేయండి = 'labelText()' > ఇక్కడ నొక్కండి బటన్ >
శరీరం > కేంద్రం >
-
- మొదట, లోపల ' <కేంద్రం> 'ట్యాగ్,' చేర్చండి లేబుల్ 'పేర్కొన్న'తో id 'మరియు' వచనం 'విలువలు.
- ఆ తర్వాత, జోడించిన “తో బటన్‌ను సృష్టించండి క్లిక్ చేయండి ” ఫంక్షన్ లేబుల్ టెక్స్ట్()ని ప్రేరేపించే ఈవెంట్
ఇప్పుడు, క్రింద ఇవ్వబడిన జావాస్క్రిప్ట్ కోడ్‌ని అనుసరించండి:
ఫంక్షన్ లేబుల్ టెక్స్ట్ ( ) {వీలు get = document.getElementById ( 'lbl' )
get.innerHTML= 'సంక్షిప్త పేరు డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్' ;
}
-
- ' అనే ఫంక్షన్‌ను ప్రకటించండి labelText() ”.
- దాని నిర్వచనంలో, పేర్కొన్న 'ఐడిని యాక్సెస్ చేయండి లేబుల్ 'ఉపయోగించి' document.getElementById() ” పద్ధతి.
- చివరగా, అంతర్గత HTML ప్రాపర్టీని వర్తింపజేయండి మరియు కొత్త 'ని కేటాయించండి వచనం యాక్సెస్ చేయబడిన లేబుల్‌కి విలువ. ఇది బటన్ క్లిక్‌పై లేబుల్ టెక్స్ట్‌ని కొత్త టెక్స్ట్ విలువకు మారుస్తుంది.
అవుట్‌పుట్
పై అవుట్‌పుట్‌లో, '' యొక్క వచన విలువను గమనించవచ్చు. లేబుల్ ” DOM మరియు కోడ్ రెండింటిలోనూ మార్చబడింది “ మూలకాలు ” విభాగం.
విధానం 2: ఇన్నర్‌టెక్స్ట్ ప్రాపర్టీని ఉపయోగించి జావాస్క్రిప్ట్‌లో లేబుల్ టెక్స్ట్‌ని మార్చండి
ది ' అంతర్గత వచనం ”ప్రాపర్టీ మూలకం యొక్క వచన కంటెంట్‌ని అందిస్తుంది. ఇన్పుట్ ఫీల్డ్‌లో నమోదు చేయబడిన వినియోగదారు ఇన్పుట్ విలువను కేటాయించిన లేబుల్ టెక్స్ట్‌కు కేటాయించడానికి ఈ ప్రాపర్టీని అమలు చేయవచ్చు.
వాక్యనిర్మాణం
మూలకం.innerText
పై వాక్యనిర్మాణంలో:
-
- ' మూలకం ” అనేది నిర్దిష్ట ఆస్తిని దాని పాఠ్య కంటెంట్‌ని తిరిగి అందించడానికి వర్తించే మూలకాన్ని సూచిస్తుంది.
ఉదాహరణ
కింది ఉదాహరణ పేర్కొన్న భావనను ప్రదర్శిస్తుంది:
< కేంద్రం >< శరీరం >పేరును నమోదు చేయండి: < ఇన్పుట్ రకం = 'వచనం' id = 'పేరు' విలువ = '' స్వయంపూర్తి = 'ఆఫ్' >
< p >< ఇన్పుట్ రకం = 'బటన్' id = 'బిటి' విలువ = 'లేబుల్ వచనాన్ని మార్చండి' క్లిక్ చేయండి = 'labelText()' > p >
< లేబుల్ id = 'lbl' > ఎన్ / ఎ లేబుల్ >
శరీరం > కేంద్రం >
-
- ముందుగా, పేర్కొన్న “ని కలిగి ఉన్న ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ను కేటాయించండి id ”. ది ' శూన్య ” ఇక్కడ విలువ వినియోగదారు నుండి విలువ పొందబడుతుందని సూచిస్తుంది మరియు స్వీయపూర్తిని సెట్ చేస్తుంది “ ఆఫ్ ” సూచించిన విలువలను నివారిస్తుంది.
- ఆ తర్వాత, పేర్కొన్న '' లేబుల్‌ని చేర్చండి id 'మరియు' వచనం ' విలువ.
ఇప్పుడు జావాస్క్రిప్ట్ కోడ్ స్నిప్పెట్‌లో, ఈ క్రింది దశలను చేయండి:
ఫంక్షన్ లేబుల్ టెక్స్ట్ ( ) {వీలు get = document.getElementById ( 'lbl' ) ;
వీలు name = document.getElementById ( 'పేరు' ) .విలువ;
get.innerText = పేరు;
}
-
- ' అనే ఫంక్షన్‌ను నిర్వచించండి labelText() ”. దాని నిర్వచనంలో, 'ని ఉపయోగించి సృష్టించిన లేబుల్‌ని యాక్సెస్ చేయండి document.getElementById() ” పద్ధతి.
- అదేవిధంగా, పేర్కొన్న ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌ను యాక్సెస్ చేయడానికి మరియు దాని నుండి వినియోగదారు నమోదు చేసిన విలువను పొందడానికి పై దశను పునరావృతం చేయండి.
- చివరగా, మునుపటి దశ నుండి పొందిన లేబుల్‌కు వినియోగదారు నమోదు చేసిన విలువను కేటాయించండి. ఇది ఇన్పుట్ టెక్స్ట్ ఫీల్డ్‌లో వినియోగదారు నమోదు చేసిన విలువకు లేబుల్ వచనాన్ని మారుస్తుంది.
అవుట్‌పుట్
పై అవుట్‌పుట్‌లో, కావలసిన అవసరం సాధించబడిందని స్పష్టంగా తెలుస్తుంది.
విధానం 3: j క్వెరీ టెక్స్ట్() మరియు html() పద్ధతులను ఉపయోగించి జావాస్క్రిప్ట్‌లో లేబుల్ వచనాన్ని మార్చండి
ది ' వచనం() 'పద్ధతి ఎంచుకున్న మూలకాల యొక్క టెక్స్ట్ కంటెంట్‌ను అందిస్తుంది. ది ' html() ” పద్ధతి ఎంచుకున్న మూలకాల యొక్క అంతర్గత HTML కంటెంట్‌ని అందిస్తుంది.
వాక్యనిర్మాణం
$ ( సెలెక్టర్ ) .వచనం ( )
ఈ వాక్యనిర్మాణంలో:
-
- ' సెలెక్టర్ ” ప్రాప్తి చేయబడిన మూలకం యొక్క టెక్స్ట్ కంటెంట్‌కి పాయింట్లు.
పైన ఇచ్చిన సింటాక్స్‌లో:
-
- ' సెలెక్టర్ ” ప్రాప్తి చేయబడిన మూలకం యొక్క అంతర్గత HTMLని సూచిస్తుంది.
ఉదాహరణ
ఈ ఉదాహరణ j క్వెరీ పద్ధతులను ఉపయోగించి పేర్కొన్న భావనను వివరిస్తుంది.
క్రింద ఇవ్వబడిన కోడ్ స్నిప్పెట్ ద్వారా వెళ్ళండి:
< స్క్రిప్ట్ src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > స్క్రిప్ట్ >< కేంద్రం >< శరీరం >
< లేబుల్ id = 'lbl1' > ఇది క్రింది వెబ్సైట్: లేబుల్ >
< br >< br >
< లేబుల్ id = 'lbl2' > విషయము: లేబుల్ >
< br >< br >
< బటన్ క్లిక్ చేయండి = 'labelText()' > క్లిక్ చేయండి కోసం వెబ్సైట్ బటన్ >
< బటన్ క్లిక్ చేయండి = 'labelText2()' > క్లిక్ చేయండి కోసం విషయము బటన్ >
శరీరం > కేంద్రం >
-
- మొదట, చేర్చండి ' j క్వెరీ ” లైబ్రరీ దాని పద్ధతులను వర్తింపజేయడానికి.
- ఆ తర్వాత, లోపల ' <కేంద్రం> 'ట్యాగ్, పేర్కొన్న 'తో రెండు వేర్వేరు లేబుల్‌లను చేర్చండి id ” మరియు వాటిలో ప్రతిదానికి వ్యతిరేకంగా వచన విలువ.
- అలాగే, సృష్టించిన ప్రతి లేబుల్‌కు ప్రత్యేక బటన్‌లను కేటాయించండి. రెండు బటన్లు జోడించబడి ఉంటాయి ' క్లిక్ చేయండి 'రెండు వేర్వేరు పేర్కొన్న ఫంక్షన్లను ప్రారంభించే ఈవెంట్.
ఇప్పుడు, కింది జావాస్క్రిప్ట్ కోడ్ లైన్ల ద్వారా వెళ్ళండి:
ఫంక్షన్ లేబుల్ టెక్స్ట్ ( ) {$ ( '#lbl1' ) .వచనం ( 'Linux' )
}
ఫంక్షన్ లేబుల్ టెక్స్ట్2 ( ) {
$ ( '#lbl2' ) .html ( 'జావాస్క్రిప్ట్' )
}
-
- మొదటి దశలో, '' అనే ఫంక్షన్‌ను ప్రకటించండి labelText() ”.
- దాని నిర్వచనంలో, పొందిన 'కి వ్యతిరేకంగా లేబుల్‌ని యాక్సెస్ చేయండి id 'మరియు వర్తించు' వచనం() ” దానికి పద్ధతి. ఇది లేబుల్ యొక్క టెక్స్ట్ విలువను దాని పరామితిలో పేర్కొన్న విలువకు మార్చడానికి దారి తీస్తుంది.
- అదేవిధంగా, '' అనే ఫంక్షన్‌ను నిర్వచించండి labelText2() ”.
- ఇక్కడ, అదే విధంగా, లేబుల్‌ని యాక్సెస్ చేయడానికి పైన చర్చించిన దశను పునరావృతం చేయండి. ఈ సందర్భంలో, వర్తించు ' html() ” పద్ధతి. ఈ పద్ధతి కూడా అదే విధంగా పని చేస్తుంది మరియు పేర్కొన్న వచన విలువను తిరిగి ఇస్తుంది, తద్వారా లేబుల్ టెక్స్ట్‌ని మారుస్తుంది.
అవుట్‌పుట్
పై అవుట్‌పుట్‌లో, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM)పై లేబుల్ యొక్క మొదటి రూపాంతరం చెందిన వచన విలువ j క్వెరీకి అనుగుణంగా ఉంటుంది “ వచనం() 'పద్ధతి మరియు మరొకటి' యొక్క ఫలితం html() ” పద్ధతి.
మేము జావాస్క్రిప్ట్ ఉపయోగించి లేబుల్ టెక్స్ట్‌ని మార్చడానికి విధానాలను సంకలనం చేసాము.
ముగింపు
ది ' అంతర్గత HTML 'ఆస్తి,' అంతర్గత వచనం 'ఆస్తి, లేదా j క్వెరీ' వచనం() 'మరియు' html() ” జావాస్క్రిప్ట్ ఉపయోగించి లేబుల్ వచనాన్ని మార్చడానికి పద్ధతులను ఉపయోగించవచ్చు. నిర్దిష్ట లేబుల్‌ని పొందడానికి మరియు దాని టెక్స్ట్ కంటెంట్‌ని కొత్తగా కేటాయించిన టెక్స్ట్ విలువకు మార్చడానికి అంతర్గత HTML ప్రాపర్టీని అన్వయించవచ్చు. ఇన్నర్‌టెక్స్ట్ ప్రాపర్టీని యాక్సెస్ చేసిన లేబుల్‌కి కొత్త టెక్స్ట్ విలువను కేటాయించడం ద్వారా దానిని మార్చడం కోసం అమలు చేయవచ్చు. j క్వెరీ విధానం దాని రెండు పద్ధతుల సహాయంతో లేబుల్ యొక్క టెక్స్ట్ విలువను మార్చడానికి ఉపయోగించబడుతుంది, ఫలితంగా రెండు వేర్వేరు కేటాయించిన టెక్స్ట్ విలువల రూపంలో ఒకే ఫలితం వస్తుంది. ఈ వ్రాత జావాస్క్రిప్ట్ ఉపయోగించి లేబుల్ టెక్స్ట్‌ను మార్చే పద్ధతులను ప్రదర్శించింది.