जावास्क्रिप्ट पर क्लिक करें

| | | |

ऑनक्लिक JavaScript ईवेंट एक फ़ंक्शन निष्पादित करता है जब कोई उपयोगकर्ता किसी बटन या अन्य वेब तत्व पर क्लिक करता है। इस पद्धति का उपयोग HTML दस्तावेज़ और JavaScript दस्तावेज़ में इनलाइन दोनों में किया जाता है।

JavaScript में कोडिंग करते समय, जब उपयोगकर्ता वेब पेज के साथ इंटरैक्ट करता है, तो कोड को चलाना आम बात है। उदाहरण के लिए, आप चाहते हैं कि जब कोई उपयोगकर्ता बटन दबाता है तो कुछ हो। लेकिन जावास्क्रिप्ट में कैसे?

आप इस कार्यक्षमता को लागू करते हैं

यहां वह जगह है जहां "ऑनक्लिक ()" घटना काम आ सकती है। ऑनक्लिक ईवेंट सबसे अधिक उपयोग किए जाने वाले ईवेंट प्रकारों में से एक है। जब कोई उपयोगकर्ता आपके वेब पेज पर किसी बटन या अन्य तत्व पर क्लिक करता है तो ऑनक्लिक आपको कोड चलाने देता है।

इस संक्षिप्त मार्गदर्शिका में, हम बताएंगे कि ऑनक्लिक सुविधा कैसे काम करती है। हम देखेंगे कि आप वेबसाइट को इंटरैक्टिव बनाने के लिए अपने कोड में ऑनक्लिक का उपयोग कैसे कर सकते हैं।

ईवेंट अपडेट करें

ऑनक्लिक एक प्रकार का JavaScript ईवेंट है। ईवेंट वे क्रियाएं हैं जो ब्राउज़र में होती हैं और उपयोगकर्ता या ब्राउज़र द्वारा ही शुरू की जा सकती हैं। एक बटन पर क्लिक करने वाला उपयोगकर्ता, एक फॉर्म जमा करना, या कीबोर्ड पर एक कुंजी दबाकर कार्रवाई में घटनाओं के सभी उदाहरण हैं। इस ट्यूटोरियल में, हम पहले वाले पर ध्यान देंगे: एक उपयोगकर्ता किसी आइटम पर क्लिक करता है।

इवेंट का उपयोग करके, डेवलपर्स एक वेब पेज को इंटरैक्टिव बना सकते हैं। जब उपयोगकर्ता किसी बटन पर क्लिक करता है या फ़ॉर्म सबमिट करते समय उपयोगकर्ता को संदेश प्रदर्शित करता है, तो आप फ़ॉर्म को दृश्यमान बना सकते हैं।

ईवेंट के दो मुख्य घटक होते हैं: ईवेंट हैंडलर और ईवेंट श्रोता।

जब आप कोई बटन क्लिक करते हैं, कोई कुंजी दबाते हैं, या किसी आइटम पर होवर करते हैं, तो एक ईवेंट निष्पादित होता है। ईवेंट हैंडलर वह कोड है जिसे ईवेंट प्रारंभ होने पर निष्पादित किया जाता है। उदाहरण के लिए, जब आप किसी बटन पर क्लिक करते हैं, तो ईवेंट हैंडलर चलता है।

div>

जब आप इस HTML बटन पर क्लिक करते हैं, तो "codetorun" JavaScript फ़ंक्शन निष्पादित हो जाएगा। हम एक div की तरह अन्य तत्वों के साथ ऑनक्लिक का उपयोग कर सकते हैं। ऑनक्लिक बटन के लिए विशिष्ट नहीं है।

आप साधारण जावास्क्रिप्ट में भी ऑनक्लिक का उपयोग कर सकते हैं। यहां ऑनक्लिक जावास्क्रिप्ट विधि का एक उदाहरण दिया गया है:

हम एक तत्व को पुनः प्राप्त करने के लिए जावास्क्रिप्ट विधि getElementById का उपयोग करते हैं हमारे वेब पेज का। जब हम आईडी "बटन" के साथ तत्व पर क्लिक करते हैं तो हमारा ऑनक्लिक फ़ंक्शन निष्पादित हो जाएगा। किसी तत्व या अनुच्छेद पर क्लिक करना। हम वेबसाइट पर इस कार्यक्षमता को लागू करने के लिए ऑनक्लिक विशेषता का उपयोग कर सकते हैं। आइए एक HTML पृष्ठ के साथ एक बटन और कुछ पाठ के साथ प्रारंभ करें। हम एक जावास्क्रिप्ट फ़ाइल भी बनाएंगे जिसमें हमारा ईवेंट कोड होगा।

यह एक मूल वेब पेज का एक उदाहरण है, लेकिन यह अभी तक इंटरैक्टिव नहीं है। जब यह वेबपेज चलता है तो हमें एक बटन और कुछ टेक्स्ट दिखाई देगा, लेकिन जब हम अपने बटन पर क्लिक करेंगे तो कुछ नहीं होगा। ऐसा इसलिए है क्योंकि हमने अभी तक ऑनक्लिक स्क्रिप्ट फ़ंक्शन को लागू नहीं किया है।

अब जबकि हमारा वेब पेज तैयार है, हम अपना ऑनक्लिक ईवेंट बनाना शुरू कर सकते हैं। सबसे पहले हमें अपने बटन पर ऑनक्लिक () ईवेंट श्रोता जोड़ना होगा। जब उपयोगकर्ता बटन पर क्लिक करेगा तो यह ईवेंट सुनेगा।

आइए अपनी "onclick.js" फाइल बनाएं, जिसमें हमारे चेंजपैराग्राफ () इवेंट का कोड होगा। यह इवेंट टेक्स्ट को बदल देगा। हमारे अनुच्छेद ("पी" तत्व) से कुछ और।

हमने एक JavaScript फंक्शन परिभाषित किया है जिसे चेंजपैराग्राफ कहा जाता है। हम अपने पृष्ठ पर एक अनुच्छेद का चयन करने के लिए JavaScript querySelector विधि का उपयोग करते हैं। जब हम पहली बार पेज लोड करते हैं, तो हम अपना बटन और टेक्स्ट देखेंगे जो कहता है, "जब आप बटन पर क्लिक करेंगे तो यह टेक्स्ट बदल जाएगा।"

बटन पर क्लिक करने के बाद, हमारा वेब पेज बदल जाता है और हमारे नया पाठ:

<आंकड़ा वर्ग = "WP छवि गुट"> SES9UW5H18rpOrMBgZl2G0rKN LrvhzufnH5bMpX7pd YKpLocGpIBvv9FgaeNxPpoFbLQuJKYqi4cIrWOAGWYrOnN96AJ655kefwbfkk1gCClwg P9I9fQ9G8EQnDUzJw < / आंकड़ा>

सारांश

सामान्य तौर पर, वह कोड जो वेब पर किसी ईवेंट को चलाने की अनुमति देता है, आप पृष्ठ पर क्लिक करने पर क्लिक करते हैं।

यह यह है! ऊपर दिए गए कोड का उपयोग करके, हमने सफलतापूर्वक एक वेबपेज बनाया है जो एक बटन दबाने पर कोड चलाएगा। हालांकि ऊपर दिया गया हमारा कोड केवल टेक्स्ट को बदलता है, आप इसे जितना चाहें उतना जटिल या सरल बना सकते हैं।

यदि आप चाहते हैं कि उपयोगकर्ता बटन पर क्लिक करने पर सूचित हो, तो आप अलर्ट () फ़ंक्शन का उपयोग कर सकते हैं। जावास्क्रिप्ट में। अगर आप अपने कोड में "if" डिक्लेरेशन जोड़ना चाहते हैं, तो आप

जावास्क्रिप्ट सीखने के लिए और अधिक संसाधनों के लिए, हमारे देखें जावास्क्रिप्ट लर्निंग गाइड .