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