সুতরাং, আপনি জাভাস্ক্রিপ্টে একটি ওয়েব পৃষ্ঠায় একটি উপাদান নির্বাচন করতে চান? এটি getElementById এর বিশেষত্ব পদ্ধতি, উপাদানের তথাকথিত রাজা getters জাভাস্ক্রিপ্টে।
getElementById আপনাকে তার আইডির উপর ভিত্তি করে একটি উপাদান নির্বাচন করতে দেয়। আপনি যখন এটি সম্পর্কে চিন্তা করেন তখন এটি একটি স্ব-ব্যাখ্যামূলক পদ্ধতির নাম।
এই নির্দেশিকায়, আমরা কি getElementById সম্পর্কে কথা বলতে যাচ্ছি এটি কীভাবে কাজ করে এবং কখন আপনার কোডে এটি ব্যবহার করা উচিত। আমরা আমাদের document.getElementById ডেমোতে একটি "দেখান/লুকান" টেক্সট বোতামের একটি উদাহরণ দিয়ে হেঁটে যাব।
আসুন ডুব দেওয়া যাক!
getElementById কি?
getElementById() একটি ডকুমেন্ট পদ্ধতি যা আপনার নির্দিষ্ট করা এলিমেন্ট আইডি অ্যাট্রিবিউটের উপর ভিত্তি করে একটি পৃষ্ঠায় HTML DOM থেকে একটি উপাদান নির্বাচন করে।
নিম্নলিখিত কোড বিবেচনা করুন:
index.html
<button id="mainButton">This is a button!</button>
scripts.js
const button = document.getElementById("mainButton");
আমাদের HTML কোডে, আমরা একটি <button> সংজ্ঞায়িত করেছি যে উপাদানটির ID mainButton আছে . আমাদের জাভাস্ক্রিপ্ট কোড getElementById() ব্যবহার করে এই উপাদানটি পুনরুদ্ধার করবে পদ্ধতি
আপনি যদি একটি পৃষ্ঠায় একটি একক উপাদান পুনরুদ্ধার করতে চান তবে এই পদ্ধতিটি কার্যকর। আপনি যদি এইচটিএমএল এবং সিএসএস শেখার কথা মনে করেন তবে আপনি জানতে পারবেন যে আইডিগুলি অনন্য হতে হবে। এটি getElementById() করে একক উপাদান পুনরুদ্ধারের জন্য নিখুঁত.
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
আপনি যদি একটি উপাদানের জন্য একটি আইডি বরাদ্দ করে থাকেন তবে আপনি এই পদ্ধতিটি ব্যবহার করতে বেছে নিতে পারেন। একটি বিস্তৃত getter ব্যবহার করার পরিবর্তে যেমন querySelector অথবা getElementByClass , যা একটি নির্দিষ্ট মানদণ্ড পূরণ করে এমন প্রথম উপাদান বস্তুটি ফেরত দেয়, আপনি getElementById() ব্যবহার করে একটি উপাদান পুনরুদ্ধার করতে পারেন .
getElementById() একটি ওয়েব পৃষ্ঠায় একটি আইটেম পুনরুদ্ধার করতে ব্যবহৃত একটি সাধারণ পদ্ধতি।
getElementById সম্পর্কে আপনার যা জানা দরকার
আমরা একটি উদাহরণ অনুসন্ধান করার আগে, আমরা এই পদ্ধতিটি ব্যবহার করার সময় নতুনরা প্রায়শই যে ভুলগুলি করে সে সম্পর্কে কথা বলতে যাচ্ছি।
আপনি যখন নতুন কিছু শিখছেন এবং এটি কাজ করে না তখন এটি সর্বদা হতাশাজনক, তাই আসুন আপনি getElementById() এর হ্যাং করার সময় আপনি কী সাধারণ ত্রুটিগুলি করতে পারেন সে সম্পর্কে চ্যাট করি। .
প্রথমে, getElementById() কেস সংবেদনশীল। যদিও শব্দটি ID সাধারণত প্রোগ্রামিং এ ক্যাপিটালাইজ করা হয়, আপনাকে উটের কেস Id ব্যবহার করতে হবে আপনি যখন এই পদ্ধতি ব্যবহার করছেন। অন্যথায়, এই পদ্ধতি কাজ করবে না।
দ্বিতীয়ত, আপনি যে আইডি নির্দিষ্ট করেছেন তাতে পাউন্ড সাইন (হ্যাশট্যাগ) অন্তর্ভুক্ত করা উচিত নয়। এই কোড বিবেচনা করুন:
const button = document.getElementById("#mainButton");
এই উদাহরণটি দেখে মনে হতে পারে এটি ID mainButton সহ উপাদানটি পুনরুদ্ধার করবে৷ , কিন্তু এটি ক্ষেত্রে নয়। আপনি যে উপাদানটি পুনরুদ্ধার করতে চান শুধুমাত্র তার আইডি নির্দিষ্ট করুন:
const button = document.getElementById("mainButton"); এখন এটির বাইরে, আমরা একটি উদাহরণ দিয়ে যেতে পারি।
কীভাবে getElementById ব্যবহার করবেন
আপনি যখন ওয়েব ব্রাউজ করছেন, তখন আপনি "আরো পড়ুন" বলে ট্যাগগুলির সম্মুখীন হতে পারেন৷ একটি ওয়েব পৃষ্ঠা পাঠ্যের একটি অংশের কয়েকটি বাক্য দেখাতে পারে এবং তারপরে আপনাকে সেই বোতামটি টিপতে বলবে যাতে আপনি বাকি পাঠ্যটি দেখতে পারেন।
আমরা getElementById() ব্যবহার করে সেই বৈশিষ্ট্যটি তৈরি করতে যাচ্ছি প্রাপ্ত আপনি GitHub-এ এই টিউটোরিয়ালের চূড়ান্ত কোড দেখতে পারেন।
ফ্রন্ট-এন্ড তৈরি করা হচ্ছে
HTML এবং CSS ব্যবহার করে একটি সাধারণ ফ্রন্ট-এন্ড তৈরি করে শুরু করা যাক। index.html নামে একটি নতুন ফাইল তৈরি করুন এবং নিম্নলিখিত কোডে পেস্ট করুন:
<!DOCTYPE html>
<html>
<head>
<title>An Introduction to getElementById()</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<h1>JavaScript getElementById()</h1>
<p>Are you looking to learn more about getElementById()? You've come to the right place.</p>
<span id="showMore">Read more</span>
<p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p>
</div>
</body>
<script src="scripts.js"></script>
</html>
এই নথিতে, আমরা একটি বাক্স সংজ্ঞায়িত করেছি যাতে getElementById() সম্পর্কে তথ্য রয়েছে পদ্ধতি আমাদের বাক্সে একটি শিরোনাম, পাঠ্যের দুটি অনুচ্ছেদ এবং একটি স্প্যান HTML ট্যাগ রয়েছে যা আমরা শেষ অনুচ্ছেদটি প্রকাশ করতে ব্যবহার করব।
styles.css নামে একটি ফাইল খুলুন এবং এই কোডটি পেস্ট করুন:
<!DOCTYPE html>
<html>
<head>
<title>An Introduction to getElementById()</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div>
<h1>JavaScript getElementById()</h1>
<p>Are you looking to learn more about getElementById()? You've come to the right place.</p>
<span id="showMore">Read more</span>
<p id="hiddenText">getElementById() is a JavaScript method that allows you to select an element on a web page. This method is commonly referred to as a "getter" because it "gets" an element from a page.</p>
</div>
</body>
<script src="scripts.js"></script>
</html> এই কোডটি আমাদের পৃষ্ঠাটিকে আরও দৃষ্টিকটু করে তুলতে কিছু রঙ দেয়৷ আপনি যখন ওয়েব পৃষ্ঠা খুলবেন, আপনি নিম্নলিখিতগুলি দেখতে পাবেন:
একটি সমস্যা আছে:আমাদের "আরো পড়ুন" ট্যাগ কিছুই করে না এবং আমাদের পাঠ্যের শেষ অনুচ্ছেদটি এখনও দৃশ্যমান। কারণ আমরা এখনও আমাদের জাভাস্ক্রিপ্ট কোড যোগ করিনি। আসুন আমাদের ওয়েব পৃষ্ঠার জন্য জাভাস্ক্রিপ্ট কার্যকারিতা লিখি।
জাভাস্ক্রিপ্ট কোড যোগ করা হচ্ছে
আসুন আমরা যে উপাদানগুলির সাথে কাজ করতে যাচ্ছি তা নির্বাচন করে শুরু করি। আমাদের যে উপাদানগুলি নির্বাচন করতে হবে তা হল আমাদের <span> ট্যাগ (যাতে আমাদের "আরো পড়ুন" পাঠ্য রয়েছে), এবং অনুচ্ছেদ যা আমরা দেখানো এবং লুকানোর মধ্যে টগল করতে চাই৷
scripts.js নামে একটি ফাইল তৈরি করুন এবং এই কোডে পেস্ট করুন:
var paragraph = document.getElementById("hiddenText");
paragraph.style.display = "none";
আমাদের কোডে, আমরা getElementById() ব্যবহার করেছি DOM নথি থেকে আমাদের অনুচ্ছেদ পুনরুদ্ধার করতে। hiddenText ডকুমেন্ট অবজেক্ট নির্বাচন করে এবং লুকিয়ে রাখে। এর পরে, আমরা একটি ফাংশন তৈরি করব যা আমাদের পাঠ্যকে টগল করে:
function toggleText() {
if (paragraph.style.display === "none") {
paragraph.style.display = "block";
} else {
paragraph.style.display = "none";
}
}
আমরা আইডি hiddenText দিয়ে উপাদান নির্বাচন করে শুরু করেছি . এটি পাঠ্যের অনুচ্ছেদকে নির্দেশ করে যা আমরা "আরও পড়ুন" ক্লিক করলে প্রদর্শিত বা অদৃশ্য হয়ে যেতে চাই।
আমরা একটি if লিখেছি বিবৃতি যা পরীক্ষা করে যে অনুচ্ছেদটি দৃশ্যমান কিনা। যদি এটি দৃশ্যমান না হয়, তাহলে display অনুচ্ছেদের মান block এ সেট করা হবে , যা এটি প্রদর্শিত হবে; অন্যথায়, অনুচ্ছেদের display মান none সেট করা হবে , এবং তাই এটি অদৃশ্য হয়ে যাবে।
আমাদের কোড এখনো শেষ হয়নি। এর পরে, আমরা একটি ইভেন্ট লিসেনার তৈরি করতে যাচ্ছি যা আমাদের "আরও পড়ুন" পাঠ্যটিতে ক্লিক করলে সক্রিয় হবে:
var showButton = document.getElementById("showMore");
showButton.addEventListener("click", toggleText);
এই কোডটি Read more নির্বাচন করে আমাদের পৃষ্ঠায় পাঠ্য। এটি তারপর একটি ইভেন্ট লিসেনার সেট আপ করে যা আমাদের toggleText() ট্রিগার করবে পদ্ধতি যখন "আরও পড়ুন" টেক্সট ক্লিক করা হয়।
এখন, আমাদের ওয়েব পৃষ্ঠা খুলুন এবং Read more-এ ক্লিক করার চেষ্টা করুন পাঠ্য:
আমাদের কোড কার্যকরী! আপনি যখন "আরও পড়ুন" পাঠ্যটিতে ক্লিক করেন, পাঠ্যটি উপস্থিত হয়। আপনি যখন এটিতে আবার ক্লিক করেন, পাঠ্যটি অদৃশ্য হয়ে যায়৷
উপসংহার
getElementById() গেটার আপনাকে একটি ওয়েব পেজ থেকে আইডির উপর ভিত্তি করে একটি উপাদান পুনরুদ্ধার করতে দেয়।
আপনি একটি চ্যালেঞ্জ খুঁজছেন? getElementById() ব্যবহার করুন গেটার "আরও পড়ুন" এর মান পরিবর্তন করে "কম পড়ুন" যখন পাঠ্যটি দৃশ্যমান হয়। আরও যেতে, আপনি পৃষ্ঠায় কয়েকটি ছবি যুক্ত করতে পারেন এবং একটি বোতাম তৈরি করতে পারেন যা বোতামটি ক্লিক করার পরে সেই সমস্ত চিত্রগুলিকে লুকিয়ে রাখে।
এখন আপনি getElementById() ব্যবহার শুরু করতে প্রস্তুত একজন পেশাদার কোডারের মত গেটার!
