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