কীভাবে জাভাস্ক্রিপ্টে একটি পাঠ্য বাক্স ডায়নামিকভাবে তৈরি করবেন

কেউ কেউ এটিকে যাদু বলে অভিহিত করেন - অবজেক্ট তৈরির ক্ষমতা হঠাৎ কোথাও থেকে প্রকাশিত হবে না। আপনি জাভাস্ক্রিপ্টের কয়েক লাইন ব্যবহার করে আপনার ওয়েবসাইটে এই ধরণের যাদু তৈরি করতে পারেন। উদাহরণস্বরূপ, পাঠ্য বাক্সগুলি হ'ল এইচটিএমএল উপাদানগুলি ব্যবহার করতে হবে যখন অবজেক্টগুলি গতিশীলভাবে প্রদর্শিত হয়। আপনি যখন আপনার ওয়েব পৃষ্ঠা ডিজাইন করেন তখন এগুলি আপনার কোডে তৈরি করার পরিবর্তে, প্রয়োজন অনুযায়ী পাঠ্য বাক্সগুলি যুক্ত করুন এবং একই সাথে সাইট দর্শকদের মুগ্ধ করুন।

পাঠ্য বাক্স তৈরি

একটি পাঠ্য বাক্সকে বস্তুগতকরণ করার আগে, আপনাকে অবশ্যই একটি টেক্সট বাক্সটি বুঝতে হবে। এইচটিএমএল এটি নীচের উদাহরণে প্রদর্শিত হিসাবে একটি ইনপুট ট্যাগ হিসাবে জানে:

এই ইনপুট ট্যাগটি একটি পাঠ্য বাক্স তৈরি করে যাতে দুটি গুরুত্বপূর্ণ বৈশিষ্ট্য রয়েছে; আইডি এবং টাইপ। প্রকারের বৈশিষ্ট্য, যার মান "পাঠ্য" ব্রাউজারগুলিকে অন্য বোতামের মতো নিয়ন্ত্রণের পরিবর্তে একটি পাঠ্য বাক্স তৈরি করতে বলে। আইডি অ্যাট্রিবিউটটি, যা alচ্ছিক, আপনার যদি পরে পাঠ্য বাক্সে কারসাজি করতে হয় তবে তা কাজে আসবে। মান বিকল্প, যা alsoচ্ছিক, ওয়েব পৃষ্ঠাটি খুললে আপনি পাঠ্য বাক্সে দেখতে চান এমন মান ধারণ করে।

গতিশীল পাঠ্য বাক্স

আপনি যখনই কোনও উপাদানকে তার মান প্রদান করেন ততক্ষণ আপনি যখন কোনও উপাদানের বৈশিষ্ট্যগুলি সংজ্ঞায়িত করেন তখন এইচটিএমএল কিছু যায় আসে না। এর অর্থ হ'ল আপনার কাছে একটি পাঠ্য বাক্স উপাদান গতিশীলরূপে তৈরি করার ক্ষমতা রয়েছে এবং আপনি যে কোনও সময় এর বৈশিষ্ট্যগুলি সেট করতে পারেন। ডকুমেন্ট.ক্রিটএলমেন্ট ফাংশন নীচে প্রদর্শিত হিসাবে এটি সম্ভব করে তোলে:

var box = document.createElement ("ইনপুট");

এইচটিএমএল ইনপুট উপাদান তৈরি করতে এবং এটি "বাক্স" নামক একটি ভেরিয়েবলকে বরাদ্দ করতে কেবল এটিই লাগে। বাক্স অবজেক্টটি কোনও পাঠ্য বাক্সে পরিণত হয় না যতক্ষণ না আপনি তার ধরণের বৈশিষ্ট্যটিকে "পাঠ্যের" মান হিসাবে এই উদাহরণটিতে দেখান:

box.type = "পাঠ্য";

ওয়েব পৃষ্ঠা ইন্টিগ্রেশন

নীচের এই কোডটি এইচটিএমএল ডকুমেন্টে পাঠ্য বাক্স সংযোজন করেছে the দরকারী অ্যাপেনডিল্ড ফাংশন ব্যবহার করে:

document.body.appendChild (বক্স);

আপনি যদি নির্দিষ্ট নিয়ন্ত্রণের পরে পাঠ্য বাক্সটি যুক্ত করতে চান তবে পরিবর্তে নিম্নলিখিত বিবৃতিটি ব্যবহার করুন:

document.getElementById ("কিছু_এলিমেন্ট_আইডি") app অ্যাপেন্ডচিল্ড (বাক্স);

"কিছু_এলিমেন্ট_আইডি" পরিবর্তিত করুন উপাদানটির নাম দিয়ে যার পরে আপনি পাঠ্য বাক্সটি যুক্ত করতে চান। উদাহরণস্বরূপ, যদি সেই উপাদানটি এমন একটি বোতাম হয় যার আইডি "বাটন 1" ছিল, তবে অ্যাপেন্ডচিল্ড বিবৃতিটি নীচে প্রদর্শিত হবে:

document.getElementById ("বাটন 1")। অ্যাপেন্ডচিল্ড (বাক্স);

Ptionচ্ছিক বৈশিষ্ট্য

আপনার নতুন পাঠ্য বাক্সটি এই কোডটি ব্যবহার করে পুরোপুরি কাজ করবে will কেবল একটি জাভাস্ক্রিপ্ট ফাংশন তৈরি করুন যাতে বিবৃতিটি রয়েছে এবং যখনই আপনার কোনও পাঠ্য বাক্সের প্রয়োজন হবে তখন এটিকে কল করুন। তবে, আপনি নীচে পাঠ্য বাক্সের মান এবং আইডি বৈশিষ্ট্যগুলি সেট করতে পারেন:

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

বক্সভ্যালু এবং বক্সআইডির মানগুলি ফাংশনে পাস করুন এবং এটি পাঠ্য বাক্সে এই বৈশিষ্ট্যগুলি প্রয়োগ করে। আপনি যদি কোনও আইডি মান নির্ধারণ করেন, আপনি নীচের উদাহরণে প্রদর্শিত টেক্সট বাক্সের বৈশিষ্ট্যগুলি আপডেট করতে এটি পরে ব্যবহার করতে পারেন:

var boxObject = document.getElementById (বক্সআইডি); বক্সঅবজেক্ট.স্টাইল.ব্যাকগ্রাউন্ড কালার = "লাল";

প্রথম বিবৃতিটি পাঠ্য বাক্সের একটি রেফারেন্স পেয়েছে এবং শেষ বিবৃতিটি টেক্সট বাক্সের পটভূমির রঙকে লাল রঙে পরিবর্তন করে।