ஜாவாஸ்கிரிப்டில் டைனமிகலாக ஒரு உரை பெட்டியை உருவாக்குவது எப்படி

சிலர் இதை மந்திரம் என்று அழைக்கிறார்கள் - பொருள்களை எங்கும் இல்லாத வகையில் திடீரென தோன்றும் திறன். ஜாவாஸ்கிரிப்ட்டின் சில வரிகளைப் பயன்படுத்தி உங்கள் இணையதளத்தில் இந்த வகையான மந்திரத்தை உருவாக்கலாம். உரை பெட்டிகள், எடுத்துக்காட்டாக, பொருள்களை மாறும் வகையில் காணக் கற்றுக் கொள்ளும்போது பயன்படுத்த நல்ல HTML கூறுகள். உங்கள் வலைப்பக்கத்தை வடிவமைக்கும்போது அவற்றை உங்கள் குறியீட்டில் உருவாக்குவதற்கு பதிலாக, தேவைக்கேற்ப உரை பெட்டிகளைச் சேர்த்து, அதே நேரத்தில் தள பார்வையாளர்களைக் கவரவும்.

உரை பெட்டி உருவாக்கம்

உரை பெட்டியை செயல்படுத்துவதற்கு முன், உரை பெட்டி என்றால் என்ன என்பதை நீங்கள் புரிந்து கொள்ள வேண்டும். பின்வரும் எடுத்துக்காட்டில் காட்டப்பட்டுள்ளபடி HTML இதை உள்ளீட்டு குறிச்சொல்லாக அறிவது:

இந்த உள்ளீட்டு குறிச்சொல் இரண்டு முக்கியமான பண்புகளைக் கொண்ட உரை பெட்டியை உருவாக்குகிறது; ஐடி மற்றும் வகை. வகை பண்புக்கூறு, அதன் மதிப்பு "உரை", ஒரு பொத்தானைப் போன்ற மற்றொரு வகை கட்டுப்பாட்டுக்கு பதிலாக உரை பெட்டியை உருவாக்க உலாவிகளுக்கு சொல்கிறது. உரை பெட்டியை பின்னர் கையாள வேண்டுமானால், விருப்பமான ஐடி பண்புக்கூறு கைக்குள் வரலாம். மதிப்பு விருப்பம், இது விருப்பமானது, வலைப்பக்கம் திறக்கும்போது உரை பெட்டியில் நீங்கள் காண விரும்பும் மதிப்பைக் கொண்டுள்ளது.

டைனமிக் உரை பெட்டிகள்

ஒரு தனிமத்தின் பண்புகளை நீங்கள் எங்காவது மதிப்புகளைக் கொடுக்கும் வரை அவற்றை வரையறுக்கும்போது HTML கவலைப்படாது. இதன் பொருள் உரை பெட்டி உறுப்பை மாறும் வகையில் உருவாக்கும் திறன் மற்றும் நீங்கள் விரும்பும் எந்த நேரத்திலும் அதன் பண்புகளை அமைத்தல். Document.createElement செயல்பாடு கீழே காட்டப்பட்டுள்ளபடி இதை சாத்தியமாக்குகிறது:

var box = document.createElement ("உள்ளீடு");

ஒரு HTML உள்ளீட்டு உறுப்பை உருவாக்கி, "பெட்டி" என்ற பெயரில் அதை மாற்றுவதற்கு அவ்வளவுதான். இந்த எடுத்துக்காட்டில் காட்டப்பட்டுள்ளபடி, அதன் வகை பண்புக்கூறு "உரை" இன் மதிப்பைக் கொடுக்கும் வரை பெட்டி பொருள் உரை பெட்டியாக மாறாது:

box.type = "உரை";

வலைப்பக்க ஒருங்கிணைப்பு

கீழேயுள்ள இந்த குறியீடு உரை பெட்டியை HTML ஆவணத்துடன் சேர்க்கிறது. பயனுள்ள appendChild செயல்பாட்டைப் பயன்படுத்துகிறது:

document.body.appendChild (பெட்டி);

ஒரு குறிப்பிட்ட கட்டுப்பாட்டுக்குப் பிறகு உரை பெட்டியைச் சேர்க்க விரும்பினால், அதற்கு பதிலாக பின்வரும் அறிக்கையைப் பயன்படுத்தவும்:

document.getElementById ("some_Element_ID"). appendChild (பெட்டி);

"Some_Element_ID" ஐ உறுப்பு பெயருடன் மாற்றவும், அதன் பிறகு நீங்கள் உரை பெட்டியை சேர்க்க விரும்புகிறீர்கள். எடுத்துக்காட்டாக, அந்த உறுப்பு ஒரு ஐடி "பொத்தான் 1" ஆக இருந்தால், appendChild அறிக்கை பின்வருமாறு தோன்றும்:

document.getElementById ("button1"). appendChild (பெட்டி);

விருப்ப பண்புக்கூறுகள்

இந்த குறியீட்டைப் பயன்படுத்தி உங்கள் புதிய உரை பெட்டி சரியாக வேலை செய்யும். அறிக்கையை உள்ளடக்கிய ஜாவாஸ்கிரிப்ட் செயல்பாட்டை உருவாக்கி, உங்களுக்கு உரை பெட்டி தேவைப்படும்போதெல்லாம் அழைக்கவும். இருப்பினும், உரை பெட்டியின் மதிப்பு மற்றும் ஐடி பண்புகளையும் பின்வருமாறு அமைக்கலாம்:

box.value = boxValue; box.id = boxID;

BoxValue மற்றும் boxID இன் மதிப்புகளை செயல்பாட்டுக்கு அனுப்பவும், அது உரை பெட்டியில் அந்த பண்புகளை பயன்படுத்துகிறது. நீங்கள் ஒரு ஐடி மதிப்பை ஒதுக்கினால், கீழேயுள்ள எடுத்துக்காட்டில் காட்டப்பட்டுள்ளபடி உரை பெட்டியின் பண்புகளை புதுப்பிக்க பின்னர் பயன்படுத்தலாம்:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "சிவப்பு";

முதல் அறிக்கை உரை பெட்டியைப் பற்றிய குறிப்பைப் பெறுகிறது, கடைசி அறிக்கை உரை பெட்டியின் பின்னணி நிறத்தை சிவப்பு நிறமாக மாற்றுகிறது.