JavaScript के साथ एलिमेंट पर क्लिक की संख्या गिनना सबसे आसान कामों में से एक है। आपको बस एक वेरिएबल घोषित करना है अपने क्लिक्स को स्टोर करने के लिए और फिर अपने टार्गेट एलिमेंट पर addEventListener मेथड का उपयोग करना है।
मान लीजिए आप एक बटन एलिमेंट पर क्लिक की संख्या ट्रैक करना चाहते हैं, जैसे होम बटन।
HTML मार्कअप
एक HTML बटन एलिमेंट बनाएं और इसे button-home क्लास दें:
<button class="button-home">Home</button>JavaScript
निम्न कोड को अपनी JavaScript फ़ाइल में जोड़ें (मैं नीचे कोड समझाऊंगा):
let buttonHome = document.querySelector(".button-home"); let CountButtonHomeClicks = 0; buttonHome.addEventListener("click", function() { CountButtonHomeClicks += 1; console.log(CountButtonHomeClicks); });परिणाम:
मैंने उपरोक्त बटन एलिमेंट में थोड़ा CSS स्टाइलिंग जोड़ा ताकि इसे हिट करना आसान हो।
JavaScript कोड में क्या हो रहा है:
- सबसे पहले, हम
querySelector()मेथड का उपयोग करके बटन एलिमेंट परbutton-homeक्लास को सेलेक्ट करते हैं। फिर हम इसेbuttonHomeवेरिएबल में असाइन करते हैं। - फिर हम
CountButtonHomeClicksवेरिएबल घोषित करते हैं अपने भविष्य के क्लिक्स को स्टोर करने के लिए। हम इसे 0 का डिफ़ॉल्ट प्रारंभिक मान देते हैं। - फिर हम
addEventListener()मेथड का उपयोग करके अपने buttonHome में एक इवेंट लिसनर अटैच करते हैं। - अपने इवेंट लिसनर के अंदर हम निर्दिष्ट करते हैं कि हम
'click'इवेंट्स के लिए सुन रहे हैं और हम हर क्लिक इवेंट पर एकfunction()निष्पादित करना चाहते हैं। - अपने फ़ंक्शन के अंदर, हम निर्दिष्ट करते हैं कि हम हर बार क्लिक इवेंट ट्रिगर होने पर अपने
CountButtonHomeClicksवेरिएबल में 1 जोड़ना चाहते हैं। 1 जोड़ने के लिए, हम+=(प्लस इक्वल्स) ऑपरेटर का उपयोग करते हैं। - अंत में, हम
console.log()का उपयोग करके अपनेCountButtonHomeClicksवेरिएबल पर प्रत्येक क्लिक इवेंट को लॉग करते हैं।
अब आप जानते हैं कि किसी विशिष्ट एलिमेंट पर क्लिक कैसे गिनें।
जानने योग्य:
- उपरोक्त कोड ES6 सिंटैक्स का उपयोग कर रहा है। यदि आप ES5 उपयोग कर रहे हैं, तो बस
letकोvarसे बदलें और यह वही काम करेगा। - इस उदाहरण में हम जिस फ़ंक्शन प्रकार का उपयोग करते हैं उसे अनाम फ़ंक्शन कहा जाता है क्योंकि इसका कोई नाम नहीं होता — फ़ंक्शन एक्सप्रेशंस और फ़ंक्शन डिक्लेरेशंस के विपरीत।
- अनाम फ़ंक्शन्स का पुन: उपयोग नहीं किया जा सकता। यदि आपको कई इवेंट्स पर एक ही फ़ंक्शन कॉल करने की आवश्यकता है, तो फ़ंक्शन एक्सप्रेशन या फ़ंक्शन डिक्लेरेशन का उपयोग करें।
कोड प्राप्त करें
यहाँ ऊपर दिए गए सभी कोड के साथ एक CodePen है।
