کسی خاص فارم یا سوالنامے کو پُر کرنے کے عمل میں، اکثر ایسے حالات ہوتے ہیں جب منتخب کردہ آپشن کے جواب میں کوئی خاص جواب یا اطلاع ظاہر کرنے کی ضرورت ہوتی ہے۔ مثال کے طور پر، متعدد انتخابی سوالات وغیرہ سے نمٹنا۔ ایسے معاملات میں، جاوا اسکرپٹ کا استعمال کرتے ہوئے لیبل کے متن کو تبدیل کرنا HTML فارموں کی رسائی اور دستاویز کے مجموعی ڈیزائن کو بہتر بنانے میں بہت مددگار ہے۔
جاوا اسکرپٹ کا استعمال کرتے ہوئے لیبل کا متن کیسے تبدیل کیا جائے؟
جاوا اسکرپٹ میں لیبل کے متن کو تبدیل کرنے کے لیے درج ذیل طریقوں کو استعمال کیا جا سکتا ہے:
-
- ' اندرونی ایچ ٹی ایم ایل ' جائیداد.
- ' اندرونی متن ' جائیداد.
- jQuery ' متن() 'اور' html() 'طریقے.
نقطہ نظر 1: اندرونی ایچ ٹی ایم ایل پراپرٹی کا استعمال کرتے ہوئے جاوا اسکرپٹ میں لیبل کا متن تبدیل کریں۔
' اندرونی ایچ ٹی ایم ایل پراپرٹی کسی عنصر کے اندرونی HTML مواد کو لوٹاتی ہے۔ اس خاصیت کو مخصوص لیبل لانے اور اس کے متن کو نئی تفویض کردہ ٹیکسٹ ویلیو میں تبدیل کرنے کے لیے استعمال کیا جا سکتا ہے۔
نحو
element.innerHTML
مندرجہ بالا نحو میں:
-
- ' عنصر ” سے مراد وہ عنصر ہے جس پر مخصوص پراپرٹی کو اس کے HTML مواد کو واپس کرنے کے لیے لاگو کیا جائے گا۔
مثال
بیان کردہ تصور کو واضح طور پر بیان کرنے کے لیے درج ذیل کوڈ کے ٹکڑوں کو دیکھیں:
< مرکز >< جسم >
< لیبل آئی ڈی = 'ایل بی ایل' > ڈوم لیبل >
< بی آر >< بی آر >
< بٹن کلک پر = 'labelText()' > یہاں کلک کریں بٹن >
جسم >> مرکز >
-
- سب سے پہلے، اندر ' <مرکز> 'ٹیگ، شامل کریں' لیبل 'مخصوص کے ساتھ' آئی ڈی 'اور' متن 'اقدار.
- اس کے بعد، منسلک کے ساتھ ایک بٹن بنائیں ' کلک پر تقریب لیبل ٹیکسٹ() کی دعوت
اب، نیچے دیئے گئے جاوا اسکرپٹ کوڈ پر عمل کریں:
فنکشن لیبل ٹیکسٹ ( ) {دو get = document.getElementById ( 'lbl' )
get.innerHTML= 'مختصر نام دستاویز آبجیکٹ ماڈل ہے' ;
}
-
- ایک فنکشن کا اعلان کریں جس کا نام ' لیبل ٹیکسٹ() '
- اس کی تعریف میں، مخصوص کی آئی ڈی تک رسائی حاصل کریں ' لیبل ' کا استعمال کرتے ہوئے ' document.getElementById() 'طریقہ.
- آخر میں، اندرونی ایچ ٹی ایم ایل پراپرٹی کو لاگو کریں اور ایک نیا ' تفویض کریں متن رسائی شدہ لیبل کی قدر۔ اس کے نتیجے میں بٹن پر کلک کرنے پر لیبل ٹیکسٹ کو ایک نئی ٹیکسٹ ویلیو میں تبدیل کر دیا جائے گا۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ میں، یہ دیکھا جا سکتا ہے کہ 'کی ٹیکسٹ ویلیو لیبل DOM اور کوڈ دونوں پر ' تبدیل کیا جاتا ہے ' عناصر سیکشن
نقطہ نظر 2: اندرونی ٹیکسٹ پراپرٹی کا استعمال کرتے ہوئے جاوا اسکرپٹ میں لیبل کا متن تبدیل کریں
' اندرونی متن ' پراپرٹی عنصر کے متنی مواد کو واپس کرتی ہے۔ اس خاصیت کو لاگو کیا جا سکتا ہے تاکہ تفویض کردہ لیبل کے متن میں ان پٹ فیلڈ میں درج صارف کی ان پٹ ویلیو کو مختص کیا جا سکے۔
نحو
element.innerText
مندرجہ بالا نحو میں:
-
- ' عنصر ” اس عنصر کی نشاندہی کرتا ہے جس پر اس کے متنی مواد کو واپس کرنے کے لیے مخصوص پراپرٹی کا اطلاق کیا جائے گا۔
مثال
مندرجہ ذیل مثال بیان کردہ تصور کو ظاہر کرتی ہے:
< مرکز >< جسم >ایک نام درج کریں: < ان پٹ قسم = 'متن' آئی ڈی = 'نام' قدر = '' خود کار طریقے سے مکمل = 'بند' >
< ص >< ان پٹ قسم = 'بٹن' آئی ڈی = 'بی ٹی' قدر = 'لیبل کا متن تبدیل کریں' کلک پر = 'labelText()' >> ص >
< لیبل آئی ڈی = 'ایل بی ایل' > ن / اے لیبل >
جسم >> مرکز >
-
- سب سے پہلے، ایک ان پٹ ٹیکسٹ فیلڈ مختص کریں جس میں مخصوص ' آئی ڈی ' ' خالی یہاں قدر بتاتی ہے کہ قدر صارف سے حاصل کی جائے گی اور خودکار تکمیل کو ' بند ' تجویز کردہ اقدار سے گریز کرے گا۔
- اس کے بعد، ایک لیبل شامل کریں جس میں مخصوص ' آئی ڈی 'اور' متن ' قدر.
اب جاوا اسکرپٹ کوڈ کے ٹکڑوں میں، درج ذیل اقدامات کریں:
فنکشن لیبل ٹیکسٹ ( ) {دو get = document.getElementById ( 'lbl' ) ;
دو name = document.getElementById ( 'نام' ) .قدر؛
get.innerText = نام؛
}
-
- ایک فنکشن کی وضاحت کریں جس کا نام ' لیبل ٹیکسٹ() ' اس کی تعریف میں، 'کا استعمال کرتے ہوئے تخلیق کردہ لیبل تک رسائی حاصل کریں document.getElementById() 'طریقہ.
- اسی طرح، مخصوص ان پٹ ٹیکسٹ فیلڈ تک رسائی حاصل کرنے کے لیے مندرجہ بالا مرحلہ کو دہرائیں اور اس سے صارف کی درج کردہ قدر حاصل کریں۔
- آخر میں، صارف کی درج کردہ قدر کو پچھلے مرحلے سے حاصل کردہ لیبل کو تفویض کریں۔ یہ ان پٹ ٹیکسٹ فیلڈ میں لیبل کے متن کو صارف کی درج کردہ قدر میں تبدیل کر دے گا۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ میں، یہ واضح ہے کہ مطلوبہ ضرورت حاصل کی گئی ہے.
طریقہ 3: jQuery ٹیکسٹ() اور html() طریقوں کا استعمال کرتے ہوئے جاوا اسکرپٹ میں لیبل کا متن تبدیل کریں
' متن() ' طریقہ منتخب عناصر کے متنی مواد کو لوٹاتا ہے۔' html() ' طریقہ منتخب عناصر کے اندرونی ایچ ٹی ایم ایل مواد کو لوٹاتا ہے۔
نحو
$ ( سلیکٹر ) متن ( )
اس نحو میں:
-
- ' سلیکٹر ' رسائی شدہ عنصر کے متنی مواد کی طرف اشارہ کرتا ہے۔
اوپر دیے گئے نحو میں:
-
- ' سلیکٹر ' رسائی شدہ عنصر کے اندرونی ایچ ٹی ایم ایل سے مراد ہے۔
مثال
یہ مثال jQuery طریقوں کا استعمال کرتے ہوئے بیان کردہ تصور کی وضاحت کرے گی۔
ذیل میں دیے گئے کوڈ کے ٹکڑوں کے ذریعے جائیں:
< سکرپٹ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' >> سکرپٹ >< مرکز >< جسم >
< لیبل آئی ڈی = 'lbl1' > یہ درج ذیل ویب سائٹ ہے: لیبل >
< بی آر >< بی آر >
< لیبل آئی ڈی = 'lbl2' > مواد: لیبل >
< بی آر >< بی آر >
< بٹن کلک پر = 'labelText()' > کلک کریں۔ کے لیے ویب سائٹ بٹن >
< بٹن کلک پر = 'labelText2()' > کلک کریں۔ کے لیے مواد بٹن >
جسم >> مرکز >
-
- سب سے پہلے، شامل کریں ' jQuery 'لائبریری اپنے طریقوں کو لاگو کرنے کے لئے۔
- اس کے بعد، اندر ' <مرکز> 'ٹیگ، مخصوص کے ساتھ دو مختلف لیبلز شامل کریں' آئی ڈی اور ان میں سے ہر ایک کے خلاف ٹیکسٹ ویلیو۔
- اس کے علاوہ، ہر تخلیق کردہ لیبل کے لیے الگ بٹن مختص کریں۔ دونوں بٹنوں میں ایک منسلک ہوگا ' کلک پر دو مختلف مخصوص فنکشنز کو دعوت دینے والا واقعہ۔
اب، درج ذیل جاوا اسکرپٹ کوڈ لائنوں سے گزریں:
فنکشن لیبل ٹیکسٹ ( ) {$ ( '#lbl1' ) متن ( 'لینکس' )
}
فنکشن لیبل ٹیکسٹ 2 ( ) {
$ ( '#lbl2' ) .html ( 'جاوا اسکرپٹ' )
}
-
- پہلے مرحلے میں ایک فنکشن کا اعلان کریں جس کا نام ' لیبل ٹیکسٹ() '
- اس کی تعریف میں، حاصل کردہ کے خلاف لیبل تک رسائی حاصل کریں ' آئی ڈی 'اور لاگو کریں' متن() 'اس کا طریقہ۔ اس کے نتیجے میں لیبل کی ٹیکسٹ ویلیو کو اس کے پیرامیٹر میں مخصوص قدر میں تبدیل کر دیا جائے گا۔
- اسی طرح، 'نامی ایک فنکشن کی وضاحت کریں labelText2() '
- یہاں، اسی طرح، لیبل تک رسائی کے لیے اوپر زیر بحث مرحلے کو دہرائیں۔ اس صورت میں، لاگو کریں ' html() 'طریقہ. یہ طریقہ بھی اسی طرح کام کرے گا اور مخصوص ٹیکسٹ ویلیو واپس کرے گا اس طرح لیبل ٹیکسٹ کو تبدیل کرے گا۔
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ میں، دستاویز آبجیکٹ ماڈل (DOM) پر لیبل کی پہلی تبدیل شدہ ٹیکسٹ ویلیو jQuery کے مساوی ہے۔ متن() 'طریقہ اور دوسرا اس کا نتیجہ ہے' html() 'طریقہ.
ہم نے جاوا اسکرپٹ کا استعمال کرتے ہوئے لیبل کے متن کو تبدیل کرنے کے طریقوں کو مرتب کیا ہے۔
نتیجہ
' اندرونی ایچ ٹی ایم ایل 'جائیداد،' اندرونی متن 'پراپرٹی، یا jQuery کی' متن() 'اور' html() جاوا اسکرپٹ کا استعمال کرتے ہوئے لیبل ٹیکسٹ کو تبدیل کرنے کے لیے طریقوں کو استعمال کیا جا سکتا ہے۔ اندرونی ایچ ٹی ایم ایل پراپرٹی کو مخصوص لیبل حاصل کرنے اور اس کے متنی مواد کو نئی تفویض کردہ ٹیکسٹ ویلیو میں تبدیل کرنے کے لیے لاگو کیا جا سکتا ہے۔ innerText پراپرٹی کو لاگو کیا جا سکتا ہے تاکہ رسائی شدہ لیبل کے لیے ایک نئی ٹیکسٹ ویلیو مختص کی جا سکے اور اس طرح اسے تبدیل کیا جا سکے۔ jQuery اپروچ کو اس کے دو طریقوں کی مدد سے لیبل کی ٹیکسٹ ویلیو کو تبدیل کرنے کے لیے استعمال کیا جا سکتا ہے جس کے نتیجے میں دو مختلف مختص ٹیکسٹ ویلیوز کی صورت میں ایک ہی نتیجہ نکلتا ہے۔ اس تحریر نے جاوا اسکرپٹ کا استعمال کرتے ہوئے لیبل کے متن کو تبدیل کرنے کی تکنیکوں کا مظاہرہ کیا۔