இந்த எழுதுதல் ஜாவாஸ்கிரிப்ட்டில் உள்ளீட்டு உரை மதிப்புகளைப் பெறுவதற்கும் அமைப்பதற்கும் முறைகளை விளக்குகிறது.
ஜாவாஸ்கிரிப்ட்டில் உள்ளீட்டு உரை மதிப்பை எவ்வாறு பெறுவது மற்றும் அமைப்பது?
JavaScript இல் உள்ளீட்டு உரை மதிப்பைப் பெறவும் அமைக்கவும், பயன்படுத்தவும்:
- ' getElementById() ”முறை
- ' getElementByClassName() ”முறை
- ' querySelector() ”முறை
குறிப்பிடப்பட்ட ஒவ்வொரு முறைகளையும் ஒவ்வொன்றாகப் பார்க்கவும்!
முறை 1: ஆவணம்.getElementById() முறையைப் பயன்படுத்தி ஜாவாஸ்கிரிப்டில் உள்ளீட்டு உரை மதிப்பைப் பெற்று அமைக்கவும்
' getElementById() ” முறை குறிப்பிட்ட ஐடியுடன் ஒரு உறுப்பை அணுகுகிறது. உரை மதிப்பைப் பெறுவதற்கும் அமைப்பதற்கும் உள்ளீட்டு புலங்கள் மற்றும் பொத்தான்களின் ஐடிகளை அணுக இந்த முறையைப் பயன்படுத்தலாம்.
தொடரியல்
ஆவணம். getElementById ( உறுப்புகள் )
இங்கே,' உறுப்புகள் ” என்பது ஒரு தனிமத்தின் குறிப்பிட்ட ஐடியைக் குறிக்கிறது.
கீழே உள்ள உதாரணம் விவாதிக்கப்பட்ட கருத்தை விளக்குகிறது.
உதாரணமாக
முதலாவதாக, உள்ளீட்டு உரை மதிப்புகளைப் பெறுவதற்கும் அமைப்பதற்கும் இரண்டு உள்ளீட்டு வகை புலங்கள் மற்றும் தனி பொத்தான்களைச் சேர்க்கவும். கிளிக் செய்யவும் 'குறிப்பிட்ட செயல்பாடுகளை அணுகும் நிகழ்வுகள்:
< பொத்தானை கிளிக் செய்யவும் = 'getText()' > மதிப்பைப் பெறுங்கள் பொத்தானை >
< பொத்தானை கிளிக் செய்யவும் = 'getAndSetText()' > மதிப்பை அமைக்கவும் பொத்தானை >
< உள்ளீடு வகை = 'உரை' ஐடி = 'செட்டெக்ஸ்ட்' பெயர் = 'செட்டெக்ஸ்ட்' கிளிக் செய்யவும் = 'this.value = '' ' />
பின்னர், document.getElementById() முறையின் உதவியுடன் உள்ளீட்டு புலத்தின் மதிப்பைப் பெறவும்:
ஆவணம். getElementById ( 'getText' ) . மதிப்பு = 'இங்கே உள்ளீடு' ;இப்போது, ஒரு செயல்பாட்டை அறிவிக்கவும் '' getAndSetText() ”. இங்கே, 'உடன் உள்ளீட்டு புலத்தை பெறவும் getText 'ஐடி மற்றும் உள்ளீட்டு மதிப்பை அடுத்த உள்ளீட்டு புலத்திற்கு அனுப்பவும்' தொகுப்பு உரை 'ஐடி:
செயல்பாடு getAndSetText ( ) {இருந்தது தொகுப்பு உரை = ஆவணம். getElementById ( 'getText' ) . மதிப்பு ;
ஆவணம். getElementById ( 'செட்டெக்ஸ்ட்' ) . மதிப்பு = தொகுப்பு உரை ;
}
இதேபோல், '' என்ற செயல்பாட்டை வரையறுக்கவும் getText() ”. அதன் பிறகு, உள்ளீட்டு புலத்தைப் பெறவும் ' getText ” ஐடி மற்றும் உள்ளீட்டு உரை மதிப்பைப் பெற குறிப்பிட்ட மதிப்பை எச்சரிக்கை பெட்டிக்கு அனுப்பவும்:
செயல்பாடு getText ( ) {இருந்தது getText = ஆவணம். getElementById ( 'getText' ) . மதிப்பு ;
எச்சரிக்கை ( getText ) ;
}
வெளியீடு
முறை 2: document.getElementByClassName() முறையைப் பயன்படுத்தி ஜாவாஸ்கிரிப்டில் உள்ளீட்டு உரை மதிப்பைப் பெற்று அமைக்கவும்
' getElementByClassName() ” முறையானது குறிப்பிட்ட வகுப்பின் பெயரின் உதவியுடன் ஒரு உறுப்பை அணுகுகிறது. இந்த முறையானது, உள்ளீட்டு புலத்தின் வகுப்பை அணுகுவதற்கும், உரை மதிப்பை உள்ளிடுவதற்கும் அமைப்பதற்கும் உள்ள பொத்தான்களை அணுகுவதற்குப் பயன்படுத்தப்படலாம்.
தொடரியல்
ஆவணம். getElementsByClassName ( வகுப்பு பெயர் )மேலே உள்ள தொடரியல், ' வகுப்பு பெயர் ” என்பது தனிமங்களின் வர்க்கப் பெயரைக் குறிக்கிறது.
உதாரணமாக
முந்தைய உதாரணத்தைப் போலவே, முதல் உள்ளீட்டு புலத்தை முதலில் அணுகுவோம் ' getText ” வகுப்பின் பெயர். பின்னர், ஒரு செயல்பாட்டை வரையறுக்கவும் ' getAndSetText() ” மற்றும் அதன் வர்க்கப் பெயரின் அடிப்படையில் குறிப்பிட்ட உள்ளீட்டு புலத்தைப் பெற்று அடுத்த உள்ளீட்டு புலத்தில் மதிப்பை அமைக்கவும்:
செயல்பாடு getAndSetText ( )
{
இருந்தது தொகுப்பு உரை = ஆவணம். getElementByClassName ( 'getText' ) . மதிப்பு ;
ஆவணம். getElementById ( 'செட்டெக்ஸ்ட்' ) . மதிப்பு = தொகுப்பு உரை ;
}
இதேபோல், 'என்று பெயரிடப்பட்ட ஒரு செயல்பாட்டை வரையறுக்கவும் getText() ”, முதல் உள்ளீட்டு புலத்தின் வகுப்பின் பெயரைச் சேர்த்து, பெறப்பட்ட மதிப்பைக் காட்ட, குறிப்பிட்ட மதிப்பை எச்சரிக்கைப் பெட்டியில் அனுப்பவும்:
செயல்பாடு getText ( ) {இருந்தது getText = ஆவணம். getElementByClassName ( 'getText' ) . மதிப்பு ;
எச்சரிக்கை ( getText ) ;
}
இந்த செயலாக்கம் பின்வரும் வெளியீட்டை வழங்கும்:
முறை 3: 'document.querySelector()' முறையைப் பயன்படுத்தி ஜாவாஸ்கிரிப்டில் உள்ளீட்டு உரை மதிப்பைப் பெற்று அமைக்கவும்
' document.querySelector() ” முதல் ஈ பெறுகிறது கீழே சென்றது குறிப்பிட்ட தேர்வாளருடன் பொருந்துகிறது, மேலும் addEventListener() முறை தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கு நிகழ்வு கையாளுதலை சேர்க்கலாம். உள்ளீட்டு புலம் மற்றும் பொத்தான்களின் ஐடியைப் பெறவும், அவற்றுக்கு நிகழ்வு கையாளுதலைப் பயன்படுத்தவும் இந்த முறைகளைப் பயன்படுத்தலாம்.
தொடரியல்
ஆவணம். querySelector ( CSS தேர்வாளர்கள் )இங்கே,' CSS தேர்வாளர்கள் ” ஒன்று அல்லது அதற்கு மேற்பட்ட CSS தேர்வாளர்களைப் பார்க்கவும்.
பின்வரும் உதாரணத்தைப் பாருங்கள்.
உதாரணமாக
முதலாவதாக, உள்ளீட்டு வகைகளை அவற்றின் ஒதுக்கிட மதிப்புகள் மற்றும் உள்ளீட்டு உரை மதிப்புகளைப் பெறுவதற்கும் அமைப்பதற்கும் பொத்தான்கள் ஆகியவற்றைச் சேர்க்கவும்:
< பொத்தான் ஐடி = 'பெறு' > பெறு பொத்தானை >
< உள்ளீடு வகை = 'உரை' ஐடி = 'உள்ளீடு-தொகுப்பு' இடப்பெயர்ச்சி = 'மதிப்பை அமைக்கவும்' >
< பொத்தான் ஐடி = 'செட்' > அமைக்கவும் பொத்தானை >
அடுத்து, '' ஐப் பயன்படுத்தி சேர்க்கப்பட்ட உள்ளீட்டு புலங்கள் மற்றும் பொத்தான்களைப் பெறவும் document.querySelector() ”முறை:
buttonGet விடுங்கள் = ஆவணம். querySelector ( '#பெறு' ) ;பொத்தானை அமைக்க அனுமதிக்கவும் = ஆவணம். querySelector ( '#தொகுப்பு' ) ;
உள்ளீடு பெறட்டும் = ஆவணம். querySelector ( '#உள்ளீடு-பெறு' ) ;
அமைக்கவும் = ஆவணம். querySelector ( '#உள்ளீடு-தொகுப்பு' ) ;
முடிவு செய்யட்டும் = ஆவணம். querySelector ( '#விளைவாக' ) ;
பின்னர், '' என்ற நிகழ்வு நடத்துநரைச் சேர்க்கவும் கிளிக் செய்யவும் ” இரண்டு பொத்தான்களுக்கும் முறையே மதிப்புகளைப் பெறவும் அமைக்கவும்:
பொத்தான் பெறவும். addEventListener ( 'கிளிக்' , ( ) => {விளைவாக. உள் உரை = உள்ளீடு. மதிப்பு ;
} ) ;
பொத்தான்செட். addEventListener ( 'கிளிக்' , ( ) => {
உள்ளீடு. மதிப்பு = உள்ளீடு. மதிப்பு ;
} ) ;
வெளியீடு
ஜாவாஸ்கிரிப்டில் உள்ளீட்டு உரை மதிப்பைப் பெறுவதற்கும் அமைப்பதற்கும் எளிய முறைகளைப் பற்றி நாங்கள் விவாதித்தோம்.
முடிவுரை
ஜாவாஸ்கிரிப்ட்டில் உள்ளீட்டு உரை மதிப்பைப் பெறவும் அமைக்கவும், '' ஐப் பயன்படுத்தவும் document.getElementById() ” முறை அல்லது
' document.getElementByClassName() ” குறிப்பிடப்பட்ட உள்ளீட்டு புலம் மற்றும் பொத்தான்களை அவற்றின் ஐடிகள் அல்லது வகுப்பின் பெயரின் அடிப்படையில் அணுகுவதற்கான முறை, பின்னர் அவற்றின் மதிப்புகளை அமைக்கவும். மேலும், ' document.querySelector() ” ஜாவாஸ்கிரிப்ட்டில் உள்ளீட்டு உரை மதிப்புகளைப் பெறுவதற்கும் அமைப்பதற்கும் பயன்படுத்தப்படலாம். இந்த வலைப்பதிவு ஜாவாஸ்கிரிப்ட்டில் உள்ளீட்டு உரை மதிப்புகளைப் பெறுவதற்கும் அமைப்பதற்கும் முறைகளை விளக்கியது.