ఈ రైట్-అప్ జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువలను పొందడానికి మరియు సెట్ చేయడానికి పద్ధతులను ప్రదర్శిస్తుంది.
జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువను పొందడం మరియు సెట్ చేయడం ఎలా?
జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువను పొందడానికి మరియు సెట్ చేయడానికి, వీటిని ఉపయోగించండి:
- ' getElementById() ” పద్ధతి
- ' getElementByClassName() ” పద్ధతి
- ' క్వెరీ సెలెక్టర్() ” పద్ధతి
పేర్కొన్న ప్రతి పద్ధతులను ఒక్కొక్కటిగా పరిశీలించండి!
విధానం 1: document.getElementById() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువను పొందండి మరియు సెట్ చేయండి
ది ' getElementById() ” పద్ధతి పేర్కొన్న Idతో మూలకాన్ని యాక్సెస్ చేస్తుంది. ఇన్పుట్ ఫీల్డ్‌ల ఐడిలను యాక్సెస్ చేయడానికి మరియు టెక్స్ట్ విలువను సెట్ చేయడానికి బటన్‌లను యాక్సెస్ చేయడానికి ఈ పద్ధతిని అన్వయించవచ్చు.
వాక్యనిర్మాణం
పత్రం. getElementById ( అంశాలు )
ఇక్కడ, ' అంశాలు ” అనేది మూలకం యొక్క పేర్కొన్న Idని సూచిస్తుంది.
దిగువ ఉదాహరణ చర్చించబడిన భావనను వివరిస్తుంది.
ఉదాహరణ
ముందుగా, ఇన్పుట్ టెక్స్ట్ విలువలను పొందడానికి మరియు సెట్ చేయడానికి రెండు ఇన్పుట్ టైప్ ఫీల్డ్‌లు మరియు ప్రత్యేక బటన్‌లను చేర్చండి క్లిక్ చేయండి ” పేర్కొన్న ఫంక్షన్‌లను యాక్సెస్ చేసే ఈవెంట్‌లు:
< బటన్ క్లిక్ చేయండి = 'getText()' > విలువ పొందండి బటన్ >
< బటన్ క్లిక్ చేయండి = 'getAndSetText()' > విలువను సెట్ చేయండి బటన్ >
< ఇన్పుట్ రకం = 'వచనం' id = 'సెట్టెక్స్ట్' పేరు = 'సెట్టెక్స్ట్' క్లిక్ చేయండి = 'this.value = ''' />
ఆపై, document.getElementById() పద్ధతి సహాయంతో ఇన్పుట్ ఫీల్డ్ విలువను పొందండి:
పత్రం. getElementById ( 'getText' ) . విలువ = 'ఇక్కడ ఇన్పుట్ చేయండి' ;ఇప్పుడు, '' పేరుతో ఒక ఫంక్షన్‌ను ప్రకటించండి getAndSetText() ”. ఇక్కడ, “తో ఇన్పుట్ ఫీల్డ్‌ని పొందండి getText ” id మరియు ఇన్పుట్ విలువను కలిగి ఉన్న తదుపరి ఇన్పుట్ ఫీల్డ్‌కు పాస్ చేయండి సెట్ టెక్స్ట్ 'ఐడి:
ఫంక్షన్ getAndSetText ( ) {ఉంది సెట్ టెక్స్ట్ = పత్రం. getElementById ( 'getText' ) . విలువ ;
పత్రం. getElementById ( 'సెట్టెక్స్ట్' ) . విలువ = సెట్ టెక్స్ట్ ;
}
అదేవిధంగా, '' అనే ఫంక్షన్‌ను నిర్వచించండి getText() ”. ఆ తర్వాత, ''తో ఇన్పుట్ ఫీల్డ్‌ని పొందండి getText ” id మరియు ఇన్పుట్ టెక్స్ట్ విలువను పొందడానికి నిర్దిష్ట విలువను హెచ్చరిక పెట్టెకు పంపండి:
ఫంక్షన్ getText ( ) {ఉంది getText = పత్రం. getElementById ( 'getText' ) . విలువ ;
అప్రమత్తం ( getText ) ;
}
అవుట్‌పుట్
విధానం 2: document.getElementByClassName() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువను పొందండి మరియు సెట్ చేయండి
ది ' getElementByClassName() ” పద్ధతి పేర్కొన్న తరగతి పేరు సహాయంతో ఒక మూలకాన్ని యాక్సెస్ చేస్తుంది. ఈ పద్ధతి, అదే విధంగా, ఇన్పుట్ ఫీల్డ్ యొక్క తరగతిని మరియు టెక్స్ట్ విలువను నమోదు చేయడానికి మరియు సెట్ చేయడానికి బటన్‌లను యాక్సెస్ చేయడానికి వర్తించవచ్చు.
వాక్యనిర్మాణం
పత్రం. getElementsByClassName ( తరగతి పేరు )పై వాక్యనిర్మాణంలో, “ తరగతి పేరు ” మూలకాల యొక్క తరగతి పేరును సూచిస్తుంది.
ఉదాహరణ
మునుపటి ఉదాహరణ మాదిరిగానే, మేము ముందుగా మొదటి ఇన్పుట్ ఫీల్డ్‌ను ''తో యాక్సెస్ చేస్తాము. getText 'తరగతి పేరు. అప్పుడు, '' అనే ఫంక్షన్‌ను నిర్వచించండి getAndSetText() ” మరియు దాని తరగతి పేరు ఆధారంగా పేర్కొన్న ఇన్పుట్ ఫీల్డ్‌ని పొందండి మరియు తదుపరి ఇన్పుట్ ఫీల్డ్‌లో విలువను సెట్ చేయండి:
ఫంక్షన్ getAndSetText ( )
{
ఉంది సెట్ టెక్స్ట్ = పత్రం. getElementByClassName ( 'getText' ) . విలువ ;
పత్రం. getElementById ( 'సెట్టెక్స్ట్' ) . విలువ = సెట్ టెక్స్ట్ ;
}
అదేవిధంగా, '' అనే ఫంక్షన్‌ను నిర్వచించండి getText() ”, పొందబడిన విలువను ప్రదర్శించడానికి మొదటి ఇన్పుట్ ఫీల్డ్ యొక్క తరగతి పేరును జోడించి, నిర్దిష్ట విలువను హెచ్చరిక పెట్టెకు పంపండి:
ఫంక్షన్ getText ( ) {ఉంది getText = పత్రం. getElementByClassName ( 'getText' ) . విలువ ;
అప్రమత్తం ( getText ) ;
}
ఈ అమలు కింది అవుట్‌పుట్‌ను అందిస్తుంది:
విధానం 3: “document.querySelector()” పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువను పొందండి మరియు సెట్ చేయండి
ది ' document.querySelector() ” మొదటి eని పొందుతుంది క్రిందకు వెళ్ళెను అది పేర్కొన్న సెలెక్టర్‌తో సరిపోలుతుంది మరియు addEventListener() పద్ధతి ఎంచుకున్న మూలకానికి ఈవెంట్ హ్యాండ్లర్‌ను జోడించగలదు. ఇన్పుట్ ఫీల్డ్ మరియు బటన్‌ల ఐడిని పొందడానికి మరియు వాటికి ఈవెంట్ హ్యాండ్లర్‌ను వర్తింపజేయడానికి ఈ పద్ధతులను అన్వయించవచ్చు.
వాక్యనిర్మాణం
పత్రం. querySelector ( CSS సెలెక్టర్లు )ఇక్కడ, ' CSS సెలెక్టర్లు ” ఒకటి లేదా అంతకంటే ఎక్కువ CSS సెలెక్టర్లను సూచించండి.
కింది ఉదాహరణ చూడండి.
ఉదాహరణ
ముందుగా, ఇన్పుట్ టెక్స్ట్ విలువలను పొందడానికి మరియు సెట్ చేయడానికి వాటి ప్లేస్‌హోల్డర్ విలువలు మరియు బటన్‌లతో ఇన్పుట్ రకాలను చేర్చండి:
< బటన్ id = 'పొందండి' > పొందండి బటన్ >
< ఇన్పుట్ రకం = 'వచనం' id = 'ఇన్పుట్ సెట్' ప్లేస్‌హోల్డర్ = 'విలువను సెట్ చేయండి' >
< బటన్ id = 'సెట్' > సెట్ బటన్ >
తర్వాత, “ని ఉపయోగించి జోడించిన ఇన్పుట్ ఫీల్డ్‌లు మరియు బటన్‌లను పొందండి document.querySelector() 'పద్ధతి:
బటన్ పొందనివ్వండి = పత్రం. querySelector ( '#పొందండి' ) ;బటన్‌ను సెట్ చేయనివ్వండి = పత్రం. querySelector ( '#సెట్' ) ;
getInput = పత్రం. querySelector ( '#ఇన్పుట్-గెట్' ) ;
సెట్‌ఇన్‌పుట్‌ని అనుమతించండి = పత్రం. querySelector ( '#ఇన్పుట్-సెట్' ) ;
ఫలితాన్ని ఇవ్వండి = పత్రం. querySelector ( '#ఫలితం' ) ;
ఆపై, '' అనే ఈవెంట్ హ్యాండ్లర్‌ని చేర్చండి క్లిక్ చేయండి ” రెండు బటన్‌లు వరుసగా విలువలను పొందడానికి మరియు సెట్ చేయడానికి:
బటన్ పొందండి. addEventListener ( 'క్లిక్' , ( ) => {ఫలితం. అంతర్గత వచనం = getInput. విలువ ;
} ) ;
బటన్ సెట్. addEventListener ( 'క్లిక్' , ( ) => {
getInput. విలువ = సెట్ఇన్‌పుట్. విలువ ;
} ) ;
అవుట్‌పుట్
జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువను పొందడానికి మరియు సెట్ చేయడానికి మేము సరళమైన పద్ధతులను చర్చించాము.
ముగింపు
జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువను పొందడానికి మరియు సెట్ చేయడానికి, “ని ఉపయోగించండి document.getElementById() ” పద్ధతి లేదా
' document.getElementByClassName() ” వారి idలు లేదా తరగతి పేరు ఆధారంగా పేర్కొన్న ఇన్పుట్ ఫీల్డ్ మరియు బటన్‌లను యాక్సెస్ చేయడానికి మరియు వాటి విలువలను సెట్ చేయడానికి పద్ధతి. అంతేకాకుండా, ' document.querySelector() ” జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువలను పొందడానికి మరియు సెట్ చేయడానికి కూడా ఉపయోగించవచ్చు. ఈ బ్లాగ్ జావాస్క్రిప్ట్‌లో ఇన్పుట్ టెక్స్ట్ విలువలను పొందడానికి మరియు సెట్ చేసే పద్ధతులను వివరించింది.