किसी विशेष फॉर्म या प्रश्नावली को भरने की प्रक्रिया में, अक्सर ऐसी स्थितियां होती हैं जब चयनित विकल्प के जवाब में किसी विशेष उत्तर या अधिसूचना को प्रदर्शित करने की आवश्यकता होती है। उदाहरण के लिए, बहुविकल्पीय प्रश्नों से निपटना, आदि। ऐसे मामलों में, जावास्क्रिप्ट का उपयोग करके लेबल टेक्स्ट को बदलना HTML रूपों की पहुंच और समग्र दस्तावेज़ डिज़ाइन में सुधार करने में बहुत मददगार है।
जावास्क्रिप्ट का उपयोग करके लेबल टेक्स्ट कैसे बदलें?
जावास्क्रिप्ट में लेबल टेक्स्ट को बदलने के लिए निम्नलिखित तरीकों का उपयोग किया जा सकता है:
-
- ' आंतरिक HTML ' संपत्ति।
- ' आंतरिक पाठ ' संपत्ति।
- jQuery ' मूलपाठ() ' तथा ' एचटीएमएल () 'तरीके।
दृष्टिकोण 1: जावास्क्रिप्ट में लेबल टेक्स्ट को आंतरिक HTML संपत्ति का उपयोग करके बदलें
' आंतरिक HTML ' गुण किसी तत्व की आंतरिक HTML सामग्री लौटाता है। इस गुण का उपयोग विशिष्ट लेबल लाने और इसके टेक्स्ट को नए असाइन किए गए टेक्स्ट मान में बदलने के लिए किया जा सकता है।
वाक्य - विन्यास
तत्व.आंतरिक HTML
उपरोक्त वाक्यविन्यास में:
-
- ' तत्व ' उस तत्व को संदर्भित करता है जिस पर विशिष्ट गुण अपनी HTML सामग्री को वापस करने के लिए लागू किया जाएगा।
उदाहरण
बताई गई अवधारणा को स्पष्ट रूप से समझाने के लिए निम्नलिखित कोड स्निपेट को देखें:
< केंद्र >< तन >
< लेबल पहचान = 'एलबीएल' > डोम लेबल >
< बीआर >< बीआर >
< बटन क्लिक पर = 'लेबल टेक्स्ट ()' > यहां क्लिक करें बटन >
तन > केंद्र >
-
- सबसे पहले, के भीतर ' <केंद्र> 'टैग, शामिल करें' लेबल 'निर्दिष्ट के साथ' पहचान ' तथा ' मूलपाठ 'मूल्य।
- उसके बाद, संलग्न 'के साथ एक बटन बनाएं' क्लिक पर 'घटना फ़ंक्शन लेबलटेक्स्ट () का आह्वान करती है।
अब, नीचे दिए गए जावास्क्रिप्ट कोड का पालन करें:
समारोह लेबलटेक्स्ट ( ) {होने देना प्राप्त करें = document.getElementById ( 'एलबीएल' )
get.innerHTML= 'संक्षिप्त नाम दस्तावेज़ ऑब्जेक्ट मॉडल है' ;
}
-
- 'नामक एक समारोह घोषित करें' लेबलटेक्स्ट () '
- इसकी परिभाषा में, निर्दिष्ट की आईडी तक पहुंचें ' लेबल ' का उपयोग ' document.getElementById () ' तरीका।
- अंत में, आंतरिक HTML गुण लागू करें और एक नया ' मूलपाठ 'एक्सेस किए गए लेबल के लिए मान। यह बटन क्लिक पर लेबल टेक्स्ट को एक नए टेक्स्ट मान में बदलने का परिणाम देगा।
उत्पादन
उपरोक्त आउटपुट में, यह देखा जा सकता है कि “का टेक्स्ट मान” लेबल डोम और कोड दोनों में 'बदला जाता है' तत्वों ' खंड।
दृष्टिकोण 2: इनरटेक्स्ट प्रॉपर्टी का उपयोग करके जावास्क्रिप्ट में लेबल टेक्स्ट बदलें
' आंतरिक पाठ 'गुण तत्व की पाठ्य सामग्री लौटाता है। इस गुण को इनपुट फ़ील्ड में दर्ज किए गए उपयोगकर्ता-इनपुट मान को असाइन किए गए लेबल के टेक्स्ट में आवंटित करने के लिए कार्यान्वित किया जा सकता है।
वाक्य - विन्यास
तत्व.आंतरिक पाठ
उपरोक्त वाक्यविन्यास में:
-
- ' तत्व ' उस तत्व को इंगित करता है जिस पर विशिष्ट गुण अपनी पाठ्य सामग्री को वापस करने के लिए लागू किया जाएगा।
उदाहरण
निम्नलिखित उदाहरण घोषित अवधारणा को प्रदर्शित करता है:
< केंद्र >< तन >नाम डालें: < इनपुट प्रकार = 'मूलपाठ' पहचान = 'नाम' मूल्य = '' स्वत: पूर्ण = 'बंद' >
< पी >< इनपुट प्रकार = 'बटन' पहचान = 'बीटी' मूल्य = 'लेबल टेक्स्ट बदलें' क्लिक पर = 'लेबल टेक्स्ट ()' > पी >
< लेबल पहचान = 'एलबीएल' > एन / ए लेबल >
तन > केंद्र >
-
- सबसे पहले, एक इनपुट टेक्स्ट फ़ील्ड आवंटित करें जिसमें निर्दिष्ट ' पहचान ' ' शून्य ' यहाँ मान इंगित करता है कि मान उपयोगकर्ता से प्राप्त किया जाएगा और स्वतः पूर्ण को ' बंद 'सुझाए गए मूल्यों से बचेंगे।
- उसके बाद, एक लेबल शामिल करें जिसमें निर्दिष्ट ' पहचान ' तथा ' मूलपाठ ' मूल्य।
अब जावास्क्रिप्ट कोड स्निपेट में, निम्न चरणों का पालन करें:
समारोह लेबलटेक्स्ट ( ) {होने देना प्राप्त करें = document.getElementById ( 'एलबीएल' ) ;
होने देना नाम = दस्तावेज़। getElementById ( 'नाम' ) ।मूल्य;
get.innerText = नाम;
}
-
- 'नामक एक फ़ंक्शन को परिभाषित करें' लेबलटेक्स्ट () ' इसकी परिभाषा में, 'का उपयोग करके बनाए गए लेबल तक पहुंचें' document.getElementById () ' तरीका।
- इसी तरह, निर्दिष्ट इनपुट टेक्स्ट फ़ील्ड तक पहुँचने के लिए उपरोक्त चरण को दोहराएं और इससे उपयोगकर्ता द्वारा दर्ज किया गया मान प्राप्त करें।
- अंत में, पिछले चरण से उपयोगकर्ता द्वारा दर्ज किए गए मान को फ़ेच किए गए लेबल पर असाइन करें। यह लेबल टेक्स्ट को इनपुट टेक्स्ट फ़ील्ड में उपयोगकर्ता द्वारा दर्ज किए गए मान में बदल देगा।
उत्पादन
उपरोक्त आउटपुट में, यह स्पष्ट है कि वांछित आवश्यकता प्राप्त की गई है।
दृष्टिकोण 3: jQuery टेक्स्ट () और html () विधियों का उपयोग करके जावास्क्रिप्ट में लेबल टेक्स्ट बदलें
' मूलपाठ() “विधि चयनित तत्वों की पाठ्य सामग्री लौटाती है।“ एचटीएमएल () 'विधि चयनित तत्वों की आंतरिक HTML सामग्री लौटाती है।
वाक्य - विन्यास
$ ( चयनकर्ता ) ।मूलपाठ ( )
इस वाक्यविन्यास में:
-
- ' चयनकर्ता एक्सेस किए गए तत्व की टेक्स्ट सामग्री को इंगित करता है।
ऊपर दिए गए सिंटैक्स में:
-
- ' चयनकर्ता 'एक्सेस किए गए तत्व के आंतरिक HTML को संदर्भित करता है।
उदाहरण
यह उदाहरण jQuery विधियों का उपयोग करके बताई गई अवधारणा को स्पष्ट करेगा।
नीचे दिए गए कोड स्निपेट के माध्यम से जाएं:
< लिखी हुई कहानी एसआरसी = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' > लिखी हुई कहानी >< केंद्र >< तन >
< लेबल पहचान = 'एलबीएल1' > यह निम्नलिखित वेबसाइट है: लेबल >
< बीआर >< बीआर >
< लेबल पहचान = 'एलबीएल2' > विषय: लेबल >
< बीआर >< बीआर >
< बटन क्लिक पर = 'लेबल टेक्स्ट ()' > क्लिक के लिये वेबसाइट बटन >
< बटन क्लिक पर = 'लेबल टेक्स्ट 2 ()' > क्लिक के लिये विषय बटन >
तन > केंद्र >
-
- सबसे पहले, शामिल करें ' jQuery 'पुस्तकालय अपने तरीकों को लागू करने के लिए।
- उसके बाद, के भीतर ' <केंद्र> 'टैग, निर्दिष्ट के साथ दो अलग-अलग लेबल शामिल करें' पहचान 'और उनमें से प्रत्येक के खिलाफ पाठ मूल्य।
- साथ ही, बनाए गए प्रत्येक लेबल के लिए अलग-अलग बटन आवंटित करें। दोनों बटनों में एक संलग्न होगा ' क्लिक पर 'घटना दो अलग-अलग निर्दिष्ट कार्यों को लागू करती है।
अब, निम्नलिखित जावास्क्रिप्ट कोड लाइनों के माध्यम से जाएं:
समारोह लेबलटेक्स्ट ( ) {$ ( '# एलबीएल1' ) ।मूलपाठ ( 'लिनक्स' )
}
समारोह लेबलटेक्स्ट2 ( ) {
$ ( '# एलबीएल2' ) .html ( 'जावास्क्रिप्ट' )
}
-
- पहले चरण में, 'नामक एक फ़ंक्शन घोषित करें' लेबलटेक्स्ट () '
- इसकी परिभाषा में, प्राप्त किए गए 'के विरुद्ध लेबल तक पहुंचें' पहचान 'और' लागू करें मूलपाठ() 'इसके लिए विधि। इसके परिणामस्वरूप लेबल के टेक्स्ट मान को उसके पैरामीटर में निर्दिष्ट मान में बदल दिया जाएगा।
- इसी तरह, 'नामक एक फ़ंक्शन को परिभाषित करें' लेबलटेक्स्ट2 () '
- यहां, इसी तरह, लेबल तक पहुंचने के लिए ऊपर चर्चा किए गए चरण को दोहराएं। इस मामले में, 'लागू करें' एचटीएमएल () ' तरीका। यह विधि भी उसी तरह काम करेगी और निर्दिष्ट टेक्स्ट मान लौटाएगी जिससे लेबल टेक्स्ट बदल जाएगा।
उत्पादन
उपरोक्त आउटपुट में, दस्तावेज़ ऑब्जेक्ट मॉडल (डीओएम) पर लेबल का पहला रूपांतरित टेक्स्ट मान jQuery से मेल खाता है ' मूलपाठ() 'विधि और दूसरा' का परिणाम है एचटीएमएल () ' तरीका।
हमने जावास्क्रिप्ट का उपयोग करके लेबल टेक्स्ट को बदलने के तरीकों को संकलित किया है।
निष्कर्ष
' आंतरिक HTML 'संपत्ति,' आंतरिक पाठ 'संपत्ति, या jQuery की' मूलपाठ() ' तथा ' एचटीएमएल () जावास्क्रिप्ट का उपयोग करके लेबल टेक्स्ट को बदलने के लिए विधियों का उपयोग किया जा सकता है। विशिष्ट लेबल प्राप्त करने और इसकी टेक्स्ट सामग्री को नए असाइन किए गए टेक्स्ट मान में बदलने के लिए आंतरिक HTML प्रॉपर्टी को लागू किया जा सकता है। इनरटेक्स्ट प्रॉपर्टी को एक्सेस किए गए लेबल पर एक नया टेक्स्ट वैल्यू आवंटित करने के लिए कार्यान्वित किया जा सकता है जिससे इसे बदल दिया जा सके। JQuery दृष्टिकोण का उपयोग लेबल के टेक्स्ट मान को उसके दो तरीकों की मदद से बदलने के लिए किया जा सकता है जिसके परिणामस्वरूप दो अलग-अलग आवंटित टेक्स्ट मानों के रूप में एक ही परिणाम प्राप्त होता है। इस राइट-अप ने जावास्क्रिप्ट का उपयोग करके लेबल टेक्स्ट को बदलने की तकनीकों का प्रदर्शन किया।