- जावास्क्रिप्ट में एक बटन को कैसे टॉगल करें?
- उदाहरण 1: एक बटन को टॉगल करके टेक्स्ट संदेशों को संशोधित करना
- उदाहरण 2: जावास्क्रिप्ट में चालू/बंद बटन को टॉगल करना
जावास्क्रिप्ट में एक बटन को कैसे टॉगल करें?
जावास्क्रिप्ट में एक बटन को टॉगल करने के लिए एक सशर्त विवरण एक बुनियादी आवश्यकता है। इसे प्राप्त करने के लिए, आपको तत्व प्राप्त करने की आवश्यकता है और फिर उस तत्व पर कुछ विशिष्ट ऑपरेशन लागू करने के लिए कुछ कस्टम फ़ंक्शन लागू किया जाता है। फ़ंक्शन बटन के ऑनक्लिक ईवेंट से संबद्ध है। ताकि, जब भी बटन पर क्लिक किया जाए, तो वह फ़ंक्शन निष्पादित हो जाएगा। आइए जावास्क्रिप्ट में एक बटन को टॉगल करने के लिए कुछ उदाहरणों का अभ्यास करें।
उदाहरण 1: एक बटन को टॉगल करके टेक्स्ट संदेशों को संशोधित करना
जावास्क्रिप्ट में एक बटन को टॉगल करके एक संदेश को संशोधित करने के लिए एक उदाहरण माना जाता है। उदाहरण में HTML और JavaScript कोड शामिल हैं, जिन्हें नीचे समझाया गया है:
HTML कोड
< एचटीएमएल >
< एच 2 > एक बटन को टॉगल करने का उदाहरण < / एच 2 >
< डिव पहचान = 'जेएस' > जादू देखने के लिए बटन दबाएं < / डिव >
< बटन क्लिक पर = 'बीटीएनटीओजी ()' > बटन < / बटन >
< / एचटीएमएल >
< लिखी हुई कहानी एसआरसी = 'टेस्ट.जेएस' >< / लिखी हुई कहानी >
HTML कोड में, विवरण इस प्रकार है:
- ए टैग 'के साथ बनाया गया है आईडी = जेएस '
- उसके बाद, a . से जुड़ा एक बटन बनाया जाता है 'बीटीएनटीओजी ()' तरीका। दबाने से 'बटन' , विधि ' बीटीएनटीओजी () ' शुरू हो रहा है।
- अंत में, जावास्क्रिप्ट फ़ाइल 'टेस्ट.जेएस' के रूप में पारित किया गया है एसआरसी अंदर <स्क्रिप्ट> टैग।
जावास्क्रिप्ट फ़ाइल के लिए कोड “ टेस्ट.जेएस 'यहां दिया गया है:
जावास्क्रिप्ट कोड
समारोहbntog ( )
{
कहाँ पे = दस्तावेज़। getElementById ( 'जेएस' ) ;
यदि ( टी। आंतरिक HTML == 'लिनक्सहिंट में आपका स्वागत है' ) {
टी। आंतरिक HTML = 'जावास्क्रिप्ट वर्ल्ड' ; }
वरना {
टी। आंतरिक HTML = 'लिनक्सहिंट में आपका स्वागत है' ; }
}इस कोड में:
- getElementById HTML तत्व को निकालने के लिए उपयोग किया जाता है ' जे एस 'और मान एक चर में संग्रहीत है' टी '
- उसके बाद, आंतरिक HTML संपत्ति को टेक्स्ट की जांच करने के लिए यदि स्थिति में नियोजित किया गया है ' लिनक्सहिंट में आपका स्वागत है '
- यदि शर्त सत्य है, तो सामग्री ' लिनक्सहिंट में आपका स्वागत है 'के साथ बदल दिया गया है 'जावास्क्रिप्ट वर्ल्ड' '.
- यदि शर्त गलत है, तो टेक्स्ट 'लिनक्सहिंट में आपका स्वागत है' div टैग को HTML सामग्री के रूप में असाइन किया गया है।
उत्पादन
आउटपुट से पता चलता है कि एक बटन को टॉगल करने से दो संदेश मिलते हैं: 'लिनक्सहिंट में आपका स्वागत है' तथा 'जावास्क्रिप्ट वर्ल्ड' वैकल्पिक रूप से।
उदाहरण 2: जावास्क्रिप्ट में चालू/बंद बटन को टॉगल करना
बटन के इनलाइन टेक्स्ट को बदलने के लिए एक उदाहरण का अनुसरण किया जाता है। इस उदाहरण में, ' चालू बंद “पाठ वैकल्पिक रूप से बटन दबाकर मान को बदल देगा। एचटीएमएल और जावास्क्रिप्ट कोड यहां दिए गए हैं:
HTML कोड
< एचटीएमएल >
< एच 2 > एक बटन को टॉगल करने का उदाहरण एच 2 >
< निवेष का प्रकार = 'बटन' पहचान = 'माईबीटीएन' मूल्य = 'बंद'
क्लिक पर = 'दिनांक();' >
< स्क्रिप्ट स्रोत = 'टेस्ट.जेएस' > लिखी हुई कहानी >
एचटीएमएल >उपरोक्त कोड इस प्रकार वर्णित है:
- एक क्लिक करने योग्य बटन जिसका आईडी है 'माईबीटीएन' बनाया गया है और इसका मान पर सेट है 'बंद' .
- बटन दबाकर, दिनांक() विधि चालू हो जाएगी।
- अंततः, 'टेस्ट.जेएस' के भीतर स्रोत पथ से जुड़ा हुआ है <स्क्रिप्ट> उपनाम।
जावास्क्रिप्ट कोड
फंक्शनटग्ल ( )
{
कहाँ पे = दस्तावेज़। getElementById ( 'माईबीटीएन' ) ;
यदि ( टी। मूल्य == 'पर' ) {
टी। मूल्य = 'बंद' ; }
अन्य ( टी। मूल्य == 'बंद' ) {
टी। मूल्य = 'पर' ; }
}इस कोड में:
- ए दिनांक() जावास्क्रिप्ट में एक बटन को टॉगल करने के लिए विधि का उपयोग किया जाता है।
- इस विधि में, आप HTML तत्व को नियोजित करके निकालते हैं getElementById संपत्ति, और फिर अगर और-अगर बयान इसमें जोड़ा जाता है।
- अगर 'मूल्य == चालू' , मान को टॉगल करें 'बंद'। यदि मान . है बंद, तब मान को '' पर टॉगल किया जाएगा पर' .
उत्पादन
आउटपुट से पता चलता है कि बटन से टॉगल किया गया है बंद प्रति पर .
बस इतना ही! आपने जावास्क्रिप्ट में एक बटन को टॉगल करना सीख लिया है।
निष्कर्ष
जावास्क्रिप्ट में, एक बटन का उपयोग अपने स्वयं के मूल्यों के विभिन्न राज्यों के बीच टॉगल करने के लिए किया जा सकता है, या किसी भी फ़ंक्शन को टॉगल ऑपरेशन से जोड़ा जा सकता है। क्लिक पर() बटन की घटना फ़ंक्शन से जुड़ी है। यह आलेख दो व्यावहारिक उदाहरणों के साथ एक बटन को टॉगल करने का एक सिंहावलोकन बताता है। पहला उदाहरण पाठ को द्वारा निकालता है आंतरिक HTML संपत्ति और इसे टॉगल बटन के माध्यम से संशोधित करता है। दूसरे उदाहरण में, कस्टम फ़ंक्शन का उपयोग करके बटन का मान ही बदल दिया जाता है।