జావాస్క్రిప్ట్‌తో క్లిక్‌ను ఎలా అనుకరించాలి?
జావాస్క్రిప్ట్‌లో క్లిక్ అనుకరణను వర్తింపజేయడానికి క్రింది విధానాలను అమలు చేయవచ్చు:
విధానం 1: ఆన్‌క్లిక్ ఈవెంట్‌ని ఉపయోగించి జావాస్క్రిప్ట్‌తో క్లిక్‌ను అనుకరించండి
ఒక ' క్లిక్ చేయండి ” బటన్ నొక్కినప్పుడు ఈవెంట్ జరుగుతుంది. బటన్ క్లిక్‌పై ఫంక్షన్‌ని అమలు చేయడానికి మరియు ''ని పెంచడానికి ఈ విధానాన్ని అన్వయించవచ్చు. క్లిక్ కౌంట్ ” బటన్‌ని క్లిక్ చేసిన ప్రతిసారీ.
సైడ్ నోట్: ఒక ' క్లిక్ చేయండి ” ఈవెంట్‌ని ఒక నిర్దిష్ట ఫంక్షన్‌తో జోడించడం ద్వారా వర్తింపజేయవచ్చు.
ఉదాహరణ
కింది కోడ్ స్నిప్పెట్ ద్వారా వెళ్ళండి:
< కేంద్రం >
< h3 శైలి = 'నేపథ్యం-రంగు: లేత నీలం;' > అనుకరణ క్లిక్ చేయండి < వ్యవధి తరగతి = 'గణన' > వ్యవధి > సార్లు h3 >
< బటన్ id = 'btn1' క్లిక్ చేయండి = 'countClick()' > నన్ను క్లిక్ చెయ్యి ! బటన్ >
కేంద్రం >
- ''తో పాటు పేర్కొన్న శీర్షికను చేర్చండి 'ట్యాగ్ పెంచడానికి' లెక్కించండి ”క్లిక్‌ల.
- తదుపరి దశలో, జోడించిన “తో బటన్‌ను సృష్టించండి క్లిక్ చేయండి ” ఈవెంట్ కౌంట్‌క్లిక్() ఫంక్షన్‌కి దారి మళ్లిస్తుంది, ఇది బటన్ క్లిక్‌పై యాక్సెస్ చేయబడుతుంది.
ఇప్పుడు, కింది జావాస్క్రిప్ట్ కోడ్ లైన్ల ద్వారా వెళ్దాం:
< స్క్రిప్ట్ >
క్లిక్ చేయనివ్వండి = 0 ;
ఫంక్షన్ కౌంట్ క్లిక్ చేయండి ( ) {
క్లిక్‌లు = క్లిక్‌లు + 1 ;
పత్రం. querySelector ( '.కౌంట్' ) . టెక్స్ట్ కంటెంట్ = క్లిక్‌లు ;
}
స్క్రిప్ట్ >
కోడ్ యొక్క ఎగువ js భాగంలో:
- ఇక్కడ, ముందుగా “తో క్లిక్‌లను ప్రారంభించండి 0 ”.
- ఆ తర్వాత, '' పేరుతో ఒక ఫంక్షన్‌ను ప్రకటించండి countClick() ”. దాని నిర్వచనంలో, ప్రారంభించిన 'ని పెంచండి క్లిక్‌లు 'తో' 1 ”. ఇది బటన్‌ను క్లిక్ చేసిన ప్రతిసారీ గణనను పెంచుతుంది.
- చివరగా, 'ని యాక్సెస్ చేయండి వ్యవధి 'మూలకం' ఉపయోగించి document.querySelector() ” పద్ధతి. అలాగే, వర్తించు “ టెక్స్ట్ కంటెంట్ స్పాన్ ఎలిమెంట్‌కు ముందు చర్చించబడిన పెరిగిన క్లిక్ కౌంట్‌ను కేటాయించడానికి ప్రాపర్టీ.
అవుట్పుట్ క్రింది విధంగా ఉంటుంది:
పై అవుట్‌పుట్‌లో ప్రతి క్లిక్‌పై పెరిగిన టైమర్ కార్యాచరణను గమనించవచ్చు.
విధానం 2: addEventListener() పద్ధతి ద్వారా జావాస్క్రిప్ట్‌తో ఒక క్లిక్‌ని అనుకరించండి
ది ' addEventListener() ” పద్ధతి ఒక మూలకానికి ఈవెంట్ హ్యాండ్లర్‌ను కేటాయిస్తుంది. ఒక మూలకానికి నిర్దిష్ట ఈవెంట్‌ను జోడించడం ద్వారా మరియు ఈవెంట్ యొక్క ట్రిగ్గర్‌పై వినియోగదారుని హెచ్చరించడం ద్వారా ఈ పద్ధతిని అమలు చేయవచ్చు.
వాక్యనిర్మాణం
మూలకం. addEventListener ( ఈవెంట్, ఫంక్షన్ )ఇచ్చిన సింటాక్స్‌లో:
- ' సంఘటన ” ఈవెంట్ పేరును సూచిస్తుంది.
- ' ఫంక్షన్ ” ఈవెంట్ జరిగినప్పుడు అమలు చేయాల్సిన ఫంక్షన్‌ని సూచిస్తుంది.
ఉదాహరణ
దిగువ ఇవ్వబడిన ప్రదర్శన పేర్కొన్న భావనను వివరిస్తుంది:
< కేంద్రం >< శరీరం >< ఒక href = '#' id = 'లింక్' > లింక్ క్లిక్ చేయండి a >
శరీరం > కేంద్రం >
< స్క్రిప్ట్ >
మేక ఉంటుంది = పత్రం. getElementById ( 'లింక్' ) ;
పొందండి. addEventListener ( 'క్లిక్' , ( ) => అప్రమత్తం ( 'అనుకరణను క్లిక్ చేయండి!' ) )
స్క్రిప్ట్ >
పై కోడ్‌లో:
- ముందుగా, ఒక 'ని పేర్కొనండి యాంకర్ ” పేర్కొన్న లింక్‌ను చేర్చడానికి ట్యాగ్ చేయండి
- కోడ్ యొక్క జావాస్క్రిప్ట్ భాగంలో, 'ని ఉపయోగించి సృష్టించిన లింక్‌ను యాక్సెస్ చేయండి document.getElementById() ” పద్ధతి.
- చివరగా, వర్తించు ' addEventListener() 'ప్రాప్యత' పద్ధతికి లింక్ ”. ది ' క్లిక్ చేయండి ” ఈవెంట్ ఈ సందర్భంలో జోడించబడింది, దీని ఫలితంగా సృష్టించబడిన లింక్‌ను క్లిక్ చేయడం ద్వారా వినియోగదారుని హెచ్చరిస్తుంది.
అవుట్పుట్
విధానం 3: క్లిక్() పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌తో క్లిక్‌ను అనుకరించండి
ది ' క్లిక్() ” పద్ధతి ఒక మూలకంపై మౌస్-క్లిక్ అనుకరణను నిర్వహిస్తుంది. పేరు పేర్కొన్న విధంగా జోడించిన బటన్‌లకు నేరుగా క్లిక్‌ను అనుకరించడానికి ఈ పద్ధతిని ఉపయోగించవచ్చు.
వాక్యనిర్మాణం
మూలకం. క్లిక్ చేయండి ( )ఇచ్చిన సింటాక్స్‌లో:
- ' మూలకం ” క్లిక్ అమలు చేయబడే మూలకాన్ని సూచిస్తుంది.
ఉదాహరణ
కింది కోడ్ స్నిప్పెట్ పేర్కొన్న భావనను వివరిస్తుంది:
< కేంద్రం >< శరీరం >< h3 > కనుక్కున్నావా ఇది పేజీ సహాయకరంగా ఉంది ? h3 >
< బటన్ క్లిక్ చేయండి = 'simulateClick()' id = 'అనుకరణ' > అవును బటన్ >
< బటన్ క్లిక్ చేయండి = 'simulateClick()' id = 'అనుకరణ' > లేదు బటన్ >
< h3 id = 'తల' శైలి = 'నేపథ్యం-రంగు: లేత ఆకుపచ్చ;' > h3 >
శరీరం > కేంద్రం >
- ముందుగా, 'లో పేర్కొన్న శీర్షికను చేర్చండి <కేంద్రం> ” ట్యాగ్.
- ఆ తర్వాత, పేర్కొన్న ఐడిలతో రెండు వేర్వేరు బటన్లను సృష్టించండి.
- అలాగే, “ని జతచేయండి క్లిక్ చేయండి ” ఫంక్షన్ సిమ్యులేట్‌క్లిక్()ని అమలు చేయడంతో ఈవెంట్.
- తదుపరి దశలో, పేర్కొన్న ''తో మరొక శీర్షికను చేర్చండి id ' యూజర్‌కు వెంటనే తెలియజేయడానికి ' క్లిక్ చేయండి ” అనుకరణ చేయబడింది.
ఇప్పుడు, క్రింద ఇవ్వబడిన జావాస్క్రిప్ట్ పంక్తుల ద్వారా వెళ్ళండి:
< స్క్రిప్ట్ >ఫంక్షన్ simulateClick ( ) {
పత్రం. getElementById ( 'అనుకరణ' ) . క్లిక్ చేయండి ( )
పొందనివ్వండి = పత్రం. getElementById ( 'తల' )
పొందండి. అంతర్గత వచనం = 'అనుకరణను క్లిక్ చేయండి!'
}
స్క్రిప్ట్ >
- ఒక ఫంక్షన్ నిర్వచించండి ' అనుకరణ క్లిక్() ”.
- ఇక్కడ, 'ని ఉపయోగించి సృష్టించిన బటన్లను యాక్సెస్ చేయండి document.getElementById() 'పద్ధతి మరియు వర్తించు' క్లిక్() ” వారికి పద్ధతి.
- ఇప్పుడు, అదేవిధంగా, కేటాయించిన శీర్షికను యాక్సెస్ చేసి, “ని వర్తింపజేయండి అంతర్గత వచనం ” అనుకరణ క్లిక్‌పై పేర్కొన్న సందేశాన్ని శీర్షికగా ప్రదర్శించడానికి ఆస్తి.
అవుట్పుట్
పై అవుట్‌పుట్‌లో, సృష్టించబడిన రెండు బటన్‌లు క్లిక్‌ను అనుకరిస్తున్నట్లు స్పష్టంగా తెలుస్తుంది.
ఈ బ్లాగ్ JavaScriptను ఉపయోగించి క్లిక్ అనుకరణను ఎలా వర్తింపజేయాలో ప్రదర్శిస్తుంది.
ముగింపు
ఒక ' క్లిక్ చేయండి 'సంఘటన,' addEventListener() 'పద్ధతి, లేదా' క్లిక్() ” జావాస్క్రిప్ట్‌తో క్లిక్‌ను అనుకరించడానికి పద్ధతిని ఉపయోగించవచ్చు. ఒక ' క్లిక్ చేయండి కౌంటర్ రూపంలో బటన్‌ను క్లిక్ చేసిన ప్రతిసారీ క్లిక్‌ని అనుకరించడానికి ఈవెంట్‌ని అన్వయించవచ్చు. ది ' addEventListener() ” అనే పద్ధతిని లింక్‌కు ఈవెంట్‌ను జోడించి, క్లిక్ అనుకరణపై వినియోగదారుకు తెలియజేయడానికి ఉపయోగించవచ్చు. ది ' క్లిక్() ” పద్ధతిని సృష్టించిన బటన్‌లకు అన్వయించవచ్చు మరియు ప్రతి బటన్‌కు అవసరమైన కార్యాచరణను నిర్వహిస్తుంది. జావాస్క్రిప్ట్‌లో క్లిక్ అనుకరణను ఎలా వర్తింపజేయాలో ఈ వ్రాత-అప్ వివరిస్తుంది.