- జావాస్క్రిప్ట్‌లో బటన్‌ను ఎలా టోగుల్ చేయాలి?
- ఉదాహరణ 1: బటన్‌ను టోగుల్ చేయడం ద్వారా వచన సందేశాలను సవరించడం
- ఉదాహరణ 2: జావాస్క్రిప్ట్‌లో ఆన్/ఆఫ్ బటన్‌ను టోగుల్ చేయడం
జావాస్క్రిప్ట్‌లో బటన్‌ను ఎలా టోగుల్ చేయాలి?
జావాస్క్రిప్ట్‌లో బటన్‌ను టోగుల్ చేయడానికి షరతులతో కూడిన స్టేట్‌మెంట్ ప్రాథమిక అవసరం. దీన్ని సాధించడానికి, మీరు మూలకాన్ని పొందాలి మరియు ఆ మూలకంపై నిర్దిష్ట ఆపరేషన్‌ను వర్తింపజేయడానికి కొంత అనుకూల ఫంక్షన్ వర్తించబడుతుంది. ఫంక్షన్ బటన్ యొక్క ఆన్‌క్లిక్ ఈవెంట్‌తో అనుబంధించబడింది. కాబట్టి, బటన్‌ను క్లిక్ చేసినప్పుడల్లా, ఆ ఫంక్షన్ అమలు చేయబడుతుంది. జావాస్క్రిప్ట్‌లో బటన్‌ను టోగుల్ చేయడానికి కొన్ని ఉదాహరణలను ప్రాక్టీస్ చేద్దాం.
ఉదాహరణ 1: బటన్‌ను టోగుల్ చేయడం ద్వారా వచన సందేశాలను సవరించడం
జావాస్క్రిప్ట్‌లోని బటన్‌ను టోగుల్ చేయడం ద్వారా సందేశాన్ని సవరించడానికి ఒక ఉదాహరణ పరిగణించబడుతుంది. ఉదాహరణలో HTML మరియు జావాస్క్రిప్ట్ కోడ్ ఉన్నాయి, ఇవి క్రింద వివరించబడ్డాయి:
HTML కోడ్
< html >
< h2 > బటన్‌ను టోగుల్ చేయడానికి ఉదాహరణ < / h2 >
< div id = 'js' > మ్యాజిక్ చూడటానికి బటన్ నొక్కండి < / div >
< బటన్ క్లిక్ చేయండి = 'btntog()' > బటన్ < / బటన్ >
< / html >
< స్క్రిప్ట్ src = 'test.js' >< / స్క్రిప్ట్ >
HTML కోడ్‌లో, వివరణ క్రింది విధంగా ఉంటుంది:
- ఎ ట్యాగ్ 'తో సృష్టించబడింది id=js ”.
- ఆ తర్వాత, a తో అనుబంధించబడిన బటన్ సృష్టించబడుతుంది 'btntog()' పద్ధతి. నొక్కడం ద్వారా 'బటన్' , పద్దతి ' btntog() ” అని ప్రేరేపించబడింది.
- చివరికి, జావాస్క్రిప్ట్ ఫైల్ 'test.js' గా ఆమోదించబడింది src లోపల <స్క్రిప్ట్> టాగ్లు.
జావాస్క్రిప్ట్ ఫైల్ కోసం కోడ్ ' test.js ” ఇక్కడ అందించబడింది:
జావాస్క్రిప్ట్ కోడ్
ఫంక్షన్btntog ( )
{
ఎక్కడ = పత్రం. getElementById ( 'js' ) ;
ఉంటే ( t. అంతర్గత HTML == 'Linuxhint కు స్వాగతం' ) {
t. అంతర్గత HTML = 'జావాస్క్రిప్ట్ వరల్డ్' ; }
లేకపోతే {
t. అంతర్గత HTML = 'Linuxhint కు స్వాగతం' ; }
}ఈ కోడ్‌లో:
- getElementById HTML మూలకాన్ని సంగ్రహించడానికి ఉపయోగించబడుతుంది ' js 'మరియు విలువ వేరియబుల్‌లో నిల్వ చేయబడుతుంది' t ”.
- ఆ తర్వాత, ది అంతర్గత HTML వచనాన్ని తనిఖీ చేయడానికి if షరతులో ఆస్తి ఉపయోగించబడింది ' Linuxhintకి స్వాగతం ”.
- షరతు నిజమైతే, కంటెంట్ “ Linuxhintకి స్వాగతం ”తో భర్తీ చేయబడింది 'జావాస్క్రిప్ట్ వరల్డ్ '.
- షరతు తప్పు అయితే, వచనం “Linuxhint కు స్వాగతం” div ట్యాగ్‌కు HTML కంటెంట్‌గా కేటాయించబడింది.
అవుట్‌పుట్
బటన్‌ను టోగుల్ చేయడం వలన రెండు సందేశాలు వస్తాయని అవుట్‌పుట్ చూపిస్తుంది “Linuxhint కు స్వాగతం” మరియు 'జావాస్క్రిప్ట్ వరల్డ్' ప్రత్యామ్నాయంగా.
ఉదాహరణ 2: జావాస్క్రిప్ట్‌లో ఆన్/ఆఫ్ బటన్‌ను టోగుల్ చేయడం
బటన్ యొక్క ఇన్‌లైన్ వచనాన్ని మార్చడానికి ఒక ఉదాహరణ అనుసరించబడింది. ఈ ఉదాహరణలో, ' ఆఫ్ ” వచనం బటన్‌ను నొక్కడం ద్వారా ప్రత్యామ్నాయంగా విలువను మారుస్తుంది. HTML మరియు JavaScript కోడ్‌లు ఇక్కడ అందించబడ్డాయి:
HTML కోడ్
< html >
< h2 > బటన్‌ను టోగుల్ చేయడానికి ఉదాహరణ h2 >
< ఇన్పుట్ రకం = 'బటన్' id = 'myBtn' విలువ = 'ఆఫ్'
క్లిక్ చేయండి = 'తేదీ();' >
< స్క్రిప్ట్ src = 'test.js' > స్క్రిప్ట్ >
html >పై కోడ్ ఇలా వివరించబడింది:
- ఐడిని కలిగి ఉన్న క్లిక్ చేయగల బటన్ 'myBtn' సృష్టించబడింది మరియు దాని విలువ సెట్ చేయబడింది 'ఆఫ్' .
- బటన్‌ను నొక్కడం ద్వారా, ది తేదీ() పద్ధతి ట్రిగ్గర్ చేయబడుతుంది.
- ముగింపు లో, 'test.js' లోపల మూల మార్గంకి జోడించబడింది <స్క్రిప్ట్> ట్యాగ్.
జావాస్క్రిప్ట్ కోడ్
ఫంక్షన్ ( )
{
ఎక్కడ = పత్రం. getElementById ( 'myBtn' ) ;
ఉంటే ( t. విలువ == 'పై' ) {
t. విలువ = 'ఆఫ్' ; }
లేకపోతే ( t. విలువ == 'ఆఫ్' ) {
t. విలువ = 'పై' ; }
}ఈ కోడ్‌లో:
- ఎ తేదీ() జావాస్క్రిప్ట్‌లో బటన్‌ను టోగుల్ చేయడానికి పద్ధతి ఉపయోగించబడుతుంది.
- ఈ పద్ధతిలో, మీరు HTML మూలకాన్ని ఉపయోగించడం ద్వారా సంగ్రహిస్తారు getElementById ఆస్తి, ఆపై if else-if స్టేట్‌మెంట్ దానికి జోడించబడుతుంది.
- ఉంటే “విలువ ==ఆన్” , విలువను టోగుల్ చేయండి 'ఆఫ్'. విలువ ఉంటే ఆఫ్, అప్పుడు విలువ టోగుల్ చేయబడుతుంది ' పై' .
అవుట్‌పుట్
బటన్ టోగుల్ చేయబడిందని అవుట్‌పుట్ చూపిస్తుంది ఆఫ్ కు పై .
అంతే! మీరు జావాస్క్రిప్ట్‌లో బటన్‌ను టోగుల్ చేయడం నేర్చుకున్నారు.
ముగింపు
జావాస్క్రిప్ట్‌లో, దాని స్వంత విలువల యొక్క వివిధ స్థితుల మధ్య టోగుల్ చేయడానికి ఒక బటన్ ఉపయోగించబడుతుంది లేదా ఏదైనా ఫంక్షన్ టోగుల్ ఆపరేషన్‌తో అనుబంధించబడుతుంది. ది onclick() బటన్ యొక్క ఈవెంట్ ఫంక్షన్‌తో అనుబంధించబడింది. ఈ కథనం రెండు ఆచరణాత్మక ఉదాహరణలతో పాటు బటన్‌ను టోగుల్ చేయడం యొక్క అవలోకనాన్ని వివరిస్తుంది. మొదటి ఉదాహరణ ద్వారా వచనాన్ని సంగ్రహిస్తుంది అంతర్గత HTML ప్రాపర్టీ మరియు దానిని టోగుల్ బటన్ ద్వారా సవరిస్తుంది. రెండవ ఉదాహరణలో, కస్టమ్ ఫంక్షన్‌ని ఉపయోగించి బటన్ యొక్క విలువ మార్చబడుతుంది.