यह ट्यूटोरियल जावास्क्रिप्ट के साथ ऑनक्लिक सेट करने की प्रक्रिया को परिभाषित करेगा।
जावास्क्रिप्ट के साथ ऑनक्लिक कैसे सेट करें
सेट करने के लिए क्लिक पर जावास्क्रिप्ट के साथ, दो अलग-अलग तरीके हैं, जो हैं:
- पहली विधि HTML तत्व के लिए मान निर्दिष्ट करना है क्लिक पर विशेषता जावास्क्रिप्ट का उपयोग कर।
- दूसरी विधि स्पष्ट रूप से एक ईवेंट श्रोता को HTML ईवेंट पर जोड़ना है जो 'के लिए जाँच करता है' क्लिक ' प्रतिस्पर्धा।
उदाहरण 1: जावास्क्रिप्ट का उपयोग करके HTML एलीमेंट के ऑनक्लिक एट्रिब्यूट को मान असाइन करें
HTML फ़ाइल में, एक शीर्षक और एक बटन बनाएँ “ मुझे क्लिक करें 'आईडी के साथ' जे एस ” जो उस पर क्लिक करने पर जावास्क्रिप्ट फ़ंक्शन को ट्रिगर करेगा।
< एच 2 > समूह जावास्क्रिप्ट के साथ ऑनक्लिक संपत्ति एच 2 >
< बटन आईडी = 'जेएस' > मुझे क्लिक करें बटन >
अगले चरण में, बनाया गया बटन एक्सेस किया जाएगा और एक ' क्लिक पर ” विशेषता इसके साथ जुड़ी होगी। बटन क्लिक करने पर, निर्दिष्ट फ़ंक्शन निष्पादित किया जाएगा और ' Style.backgroundColor ” संपत्ति बटन का रंग इस प्रकार बदल देगी:
दस्तावेज़। getElementById ( 'जेएस' ) . क्लिक पर = समारोह jsFunc ( ) {
दस्तावेज़। getElementById ( 'जेएस' ) . शैली . पीछे का रंग = 'बैंगनी' ;
}
संबंधित आउटपुट होगा:
उदाहरण 2: स्पष्ट रूप से HTML ईवेंट पर ईवेंट श्रोता जोड़ें
एक बटन बनाएँ ' यहां क्लिक करें! 'और एक आईडी असाइन करें' प्रतिस्पर्धा ” इसके लिए जो addEventListener() विधि को ट्रिगर करेगा 'क्लिक करें' प्रतिस्पर्धा:
< बटन आईडी = 'प्रतिस्पर्धा' > यहां क्लिक करें ! बलवान > बटन बलवान >>
इसके प्रयोग से बटन प्राप्त करें पहचान और फिर एक संलग्न करें ' ऐडइवेंट लिस्टनर () 'पास करके' विधि क्लिक 'घटना और समारोह' eventFunc ” जहां बटन का बैकग्राउंड कलर बदल जाएगा:
दस्तावेज़। getElementById ( 'प्रतिस्पर्धा' ) . addEventListener ( 'क्लिक करें' , इवेंटफंक ) ;समारोह घटनाFunc ( ) {
दस्तावेज़। getElementById ( 'प्रतिस्पर्धा' ) . शैली . पीछे का रंग = 'हरा' ;
}
उत्पादन
उदाहरण 3: सभी ऑनक्लिक विधियों का एक साथ उपयोग करना
इस उदाहरण में, सभी विधियों का कार्य एक साथ प्रदर्शित किया जाएगा। सबसे पहले HTML टैग के भीतर ऑनक्लिक एट्रिब्यूट को जोड़ने का डिफ़ॉल्ट तरीका है। उसके बाद, जावास्क्रिप्ट की मदद से ऑनक्लिक विशेषता को सेट करने के दो तरीके भी प्रदर्शित किए गए हैं।
निम्नलिखित उदाहरण में, तीन बटन बनाएं और ऑनक्लिक विशेषता की कार्यक्षमता देखें।
- पहला बटन ' क्लिक 'को कॉल करेगा' एचटीएमएलफंक () ” क्लिक इवेंट पर।
- बटन ' मुझे क्लिक करें 'इसकी असाइन की गई आईडी से एक्सेस किया जाएगा' जे एस ” और फिर जावास्क्रिप्ट का उपयोग करके बटन की ऑनक्लिक विशेषता के लिए एक मान निर्दिष्ट करें।
- बटन ' यहां क्लिक करें! 'आईडी का उपयोग करके एक्सेस किया जाएगा' प्रतिस्पर्धा 'और फिर एक' संलग्न करें ऐडइवेंट लिस्टनर () इसके साथ विधि:
< बटन आईडी = 'जेएस' > मुझे क्लिक करें बटन < बीआर < बीआर >
< बटन आईडी = 'प्रतिस्पर्धा' > यहां क्लिक करें ! बटन >
नीचे दिया गया कार्य 'को ट्रिगर करेगा' क्लिक पर 'बटन की घटना' क्लिक ':
समारोह htmlFunc ( ) {चेतावनी ( 'HTML ऑनक्लिक ईवेंट द्वारा क्लिक किया गया बटन' ) ;
}
क्लिक करने पर ' मुझे क्लिक करो ”बटन, निम्न फ़ंक्शन ट्रिगर करेगा जहां एक चेतावनी संदेश प्रदर्शित किया जाएगा।
दस्तावेज़। getElementById ( 'जेएस' ) . क्लिक पर = समारोह jsFunc ( ) {चेतावनी ( 'जावास्क्रिप्ट ऑनक्लिक फ़ंक्शन द्वारा क्लिक किया गया बटन' ) ;
}
दिया गया फ़ंक्शन बटन को ट्रिगर करेगा ' यहां क्लिक करें! ':
दस्तावेज़। getElementById ( 'प्रतिस्पर्धा' ) . addEventListener ( 'क्लिक करें' , इवेंटफंक ) ;समारोह घटनाFunc ( ) {
चेतावनी ( 'जावास्क्रिप्ट द्वारा क्लिक किया गया बटन इवेंट लिस्टनर विधि के साथ क्लिक करें' ) ;
}
आउटपुट प्रत्येक बटन क्लिक पर अलर्ट संदेश प्रदर्शित करेगा:
निष्कर्ष
जावास्क्रिप्ट के साथ ऑनक्लिक सेट करने के लिए, दो अलग-अलग दृष्टिकोण हैं, पहला जावास्क्रिप्ट का उपयोग करके HTML तत्व की ऑनक्लिक विशेषता के लिए एक मान निर्दिष्ट करना है और दूसरा तरीका HTML ईवेंट पर एक इवेंट श्रोता को स्पष्ट रूप से जोड़ना है जो 'की जांच करता है' क्लिक ' प्रतिस्पर्धा। इस ट्यूटोरियल ने उदाहरणों के साथ जावास्क्रिप्ट के साथ ऑनक्लिक सेट करने के तरीकों को परिभाषित किया है।