ఈ ట్యుటోరియల్ జావాస్క్రిప్ట్‌తో ఆన్‌క్లిక్‌ను ఎలా సెట్ చేయాలనే ప్రక్రియను నిర్వచిస్తుంది.
జావాస్క్రిప్ట్‌తో ఆన్‌క్లిక్‌ను ఎలా సెట్ చేయాలి
సెట్ చేయడానికి క్లిక్ చేయండి జావాస్క్రిప్ట్‌తో, రెండు వేర్వేరు పద్ధతులు ఉన్నాయి, అవి:
- HTML మూలకానికి విలువను కేటాయించడం మొదటి పద్ధతి క్లిక్ చేయండి జావాస్క్రిప్ట్ ఉపయోగించి లక్షణం.
- ' క్లిక్ చేయండి ” ఈవెంట్.
ఉదాహరణ 1: జావాస్క్రిప్ట్ ఉపయోగించి HTML మూలకం యొక్క ఆన్‌క్లిక్ అట్రిబ్యూట్‌కు విలువను కేటాయించండి
HTML ఫైల్‌లో, శీర్షిక మరియు బటన్‌ను సృష్టించండి ' నన్ను క్లిక్ చెయ్యి 'ఐడితో' js ” ఇది జావాస్క్రిప్ట్ ఫంక్షన్‌పై క్లిక్ చేస్తున్నప్పుడు ట్రిగ్గర్ చేస్తుంది.
< h2 > సెట్ జావాస్క్రిప్ట్‌తో ప్రాపర్టీని క్లిక్ చేయండి h2 >
< బటన్ id = 'js' > నన్ను క్లిక్ చెయ్యి బటన్ >
కింది దశలో, సృష్టించబడిన బటన్ యాక్సెస్ చేయబడుతుంది మరియు “ క్లిక్ చేయండి ” అనే లక్షణం దానికి జతచేయబడుతుంది. బటన్ క్లిక్ చేసిన తర్వాత, పేర్కొన్న ఫంక్షన్ అమలు చేయబడుతుంది మరియు ' style.backgroundColor ” ఆస్తి బటన్ రంగును ఈ క్రింది విధంగా మారుస్తుంది:
పత్రం. getElementById ( 'js' ) . క్లిక్ చేయండి = ఫంక్షన్ jsFunc ( ) {
పత్రం. getElementById ( 'js' ) . శైలి . నేపథ్య రంగు = 'ఊదా' ;
}
సంబంధిత అవుట్‌పుట్ ఇలా ఉంటుంది:
ఉదాహరణ 2: HTML ఈవెంట్‌లో ఈవెంట్ లిజనర్‌ని స్పష్టంగా జోడించండి
ఒక బటన్‌ను సృష్టించండి' ఇక్కడ నొక్కండి! 'మరియు ఒక ఐడిని కేటాయిస్తుంది' సంఘటన ” దానికి అది addEventListener() పద్ధతిని ట్రిగ్గర్ చేస్తుంది 'క్లిక్' సంఘటన:
< బటన్ id = 'సంఘటన' > ఇక్కడ నొక్కండి ! బలమైన > బటన్ బలమైన >>
బటన్‌ను ఉపయోగించి దాన్ని పొందండి id ఆపై ' addEventListener() 'ఒక ఉత్తీర్ణత ద్వారా పద్ధతి' క్లిక్ చేయండి 'ఈవెంట్ మరియు ఒక ఫంక్షన్' ఈవెంట్ ఫంక్ ” ఇక్కడ బటన్ యొక్క నేపథ్య రంగు మార్చబడుతుంది:
పత్రం. getElementById ( 'సంఘటన' ) . addEventListener ( 'క్లిక్' , eventFunc ) ;ఫంక్షన్ ఈవెంట్Func ( ) {
పత్రం. getElementById ( 'సంఘటన' ) . శైలి . నేపథ్య రంగు = 'ఆకుపచ్చ' ;
}
అవుట్‌పుట్
ఉదాహరణ 3: అన్ని ఆన్‌క్లిక్ పద్ధతులను ఒకేసారి ఉపయోగించడం
ఈ ఉదాహరణలో, అన్ని పద్ధతుల పని ఒకేసారి ప్రదర్శించబడుతుంది. మొదటిది HTML ట్యాగ్‌లోనే ఆన్‌క్లిక్ లక్షణాన్ని జోడించే డిఫాల్ట్ మార్గం. ఆ తర్వాత, జావాస్క్రిప్ట్ సహాయంతో ఆన్‌క్లిక్ అట్రిబ్యూట్‌ని సెట్ చేసే రెండు పద్ధతులు కూడా ప్రదర్శించబడ్డాయి.
కింది ఉదాహరణలో, మూడు బటన్‌లను సృష్టించండి మరియు ఆన్‌క్లిక్ అట్రిబ్యూట్ యొక్క కార్యాచరణను చూడండి.
- మొదటి బటన్ ' క్లిక్ చేయండి 'అని పిలుస్తుంది' htmlFunc() ” క్లిక్ ఈవెంట్‌లో.
- బటన్ ' నన్ను క్లిక్ చెయ్యి 'దాని కేటాయించిన ఐడితో యాక్సెస్ చేయబడుతుంది' js ” ఆపై జావాస్క్రిప్ట్ ఉపయోగించి బటన్ యొక్క ఆన్‌క్లిక్ లక్షణానికి విలువను కేటాయించండి.
- బటన్ ' ఇక్కడ నొక్కండి! 'ఐడిని ఉపయోగించి యాక్సెస్ చేయబడుతుంది' సంఘటన ' ఆపై ఒక 'ని అటాచ్ చేయండి addEventListener() ”దానితో పద్ధతి:
< బటన్ id = 'js' > నన్ను క్లిక్ చెయ్యి బటన్ >< br >< br >
< బటన్ id = 'సంఘటన' > ఇక్కడ నొక్కండి ! బటన్ >
దిగువ ఫంక్షన్ 'ని ట్రిగ్గర్ చేస్తుంది క్లిక్ చేయండి 'బటన్ యొక్క సంఘటన' క్లిక్ చేయండి ”:
ఫంక్షన్ htmlFunc ( ) {అప్రమత్తం ( 'HTML ఆన్‌క్లిక్ ఈవెంట్ ద్వారా బటన్ క్లిక్ చేయబడింది' ) ;
}
క్లిక్ చేసినప్పుడు ' నన్ను క్లిక్ చెయ్యి ” బటన్, హెచ్చరిక సందేశం ఎక్కడ ప్రదర్శించబడుతుందో కింది ఫంక్షన్ ట్రిగ్గర్ చేస్తుంది.
పత్రం. getElementById ( 'js' ) . క్లిక్ చేయండి = ఫంక్షన్ jsFunc ( ) {అప్రమత్తం ( 'జావాస్క్రిప్ట్ ఆన్‌క్లిక్ ఫంక్షన్ ద్వారా క్లిక్ చేయబడిన బటన్' ) ;
}
ఇచ్చిన ఫంక్షన్ బటన్‌ను ట్రిగ్గర్ చేస్తుంది ' ఇక్కడ నొక్కండి! ”:
పత్రం. getElementById ( 'సంఘటన' ) . addEventListener ( 'క్లిక్' , eventFunc ) ;ఫంక్షన్ ఈవెంట్Func ( ) {
అప్రమత్తం ( 'జావాస్క్రిప్ట్ ఆన్‌క్లిక్ విత్ ఈవెంట్‌లిస్టెనర్ మెథడ్ ద్వారా బటన్ క్లిక్ చేయబడింది' ) ;
}
అవుట్‌పుట్ ప్రతి బటన్ క్లిక్‌పై హెచ్చరిక సందేశాలను ప్రదర్శిస్తుంది:
ముగింపు
జావాస్క్రిప్ట్‌తో ఆన్‌క్లిక్‌ను సెట్ చేయడానికి, రెండు విభిన్న విధానాలు ఉన్నాయి, మొదటిది జావాస్క్రిప్ట్‌ని ఉపయోగించి HTML మూలకం యొక్క ఆన్‌క్లిక్ లక్షణానికి విలువను కేటాయించడం మరియు రెండవ విధానం ఏమిటంటే '' కోసం తనిఖీ చేసే HTML ఈవెంట్‌లో ఈవెంట్ శ్రోతను స్పష్టంగా జోడించడం. క్లిక్ చేయండి ” ఈవెంట్. ఈ ట్యుటోరియల్ ఉదాహరణలతో పాటు జావాస్క్రిప్ట్‌తో ఆన్‌క్లిక్‌ని సెట్ చేసే పద్ధతులను నిర్వచించింది.