JavaScript getElementById পদ্ধতিটি HTML ডকুমেন্ট অবজেক্ট মডেল (DOM) থেকে একটি উপাদান নির্বাচন করে। আপনি যদি এই পদ্ধতিটি ভুলভাবে বানান করেন তবে আপনি document.getElementByID is not a function সম্মুখীন হবেন আপনার প্রোগ্রামে ত্রুটি।
এই টিউটোরিয়ালটি আলোচনা করে যে এই ত্রুটির অর্থ কী এবং কেন এটি উত্থাপিত হয়েছে। আমরা এই ত্রুটির একটি উদাহরণ দিয়ে হেঁটে যাবো যাতে আপনি এটি ঠিক করতে আপনার যা জানা দরকার তা শিখতে পারেন৷
document.getElementByID একটি ফাংশন নয়
document.getElementById() মেথড হল জাভাস্ক্রিপ্ট সিলেক্টর মেথডের মধ্যে একটি। পদ্ধতিটি HTML DOM থেকে তার আইডির উপর ভিত্তি করে একটি বস্তু পুনরুদ্ধার করে।
এই পদ্ধতিটি একটি উপাদানের বিষয়বস্তু ম্যানিপুলেট করতে বা একটি নির্দিষ্ট উপাদান সম্পর্কে তথ্য পুনরুদ্ধার করতে ব্যবহৃত হয়, যেমন এর বিষয়বস্তু বা তার বৈশিষ্ট্য।
আইডি HTML এ সংজ্ঞায়িত করা হয়। একটি আইডি একটি নির্দিষ্ট উপাদানের জন্য অনন্য হতে হবে:
<header id=“top_header”></header>
<header> ট্যাগের ID top_header আছে . এই আইডিটি <header> এর জন্য অনন্য ট্যাগ আইডিগুলি প্রায়শই CSS ব্যবহার করে নির্দিষ্ট উপাদানগুলিতে শৈলী প্রয়োগ করতে ব্যবহৃত হয়।
document.getElementById() কেস-সংবেদনশীল। এই পদ্ধতিটি নয়:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
- document.getelementbyid()
- document.getElementByID()
- document.GetElementById()
পদ্ধতির নামের অন্য কোনো বৈচিত্র জাভাস্ক্রিপ্ট দ্বারা গ্রহণ করা হবে না।
যদিও এটি বড় হাতের অক্ষরে আইডি লিখতে প্রলুব্ধ হয় কারণ এটি অন্য একটি শব্দের জন্য সংক্ষিপ্ত, পদ্ধতির প্রয়োজন হয় আপনি একটি বড় হাতের I ব্যবহার করুন এবং একটি ছোট হাতের d .
getElementById পদ্ধতি সম্পর্কে আরও জানতে, JavaScript getElementById-এ আমাদের নির্দেশিকা পড়ুন।
একটি উদাহরণ দৃশ্য
আমরা একটি কোড স্নিপেট তৈরি করতে যাচ্ছি যা আমাদের অ্যাপ্লিকেশনে একজন ব্যবহারকারীকে স্বাগত জানায়। স্বাগত বার্তাটি একটি শিরোনামে থাকবে যা আমাদের পৃষ্ঠার শীর্ষে প্রদর্শিত হবে।
এই উদাহরণের উদ্দেশ্যে, আমরা একটি ডেমো নাম ব্যবহার করতে যাচ্ছি।
শুরু করতে, ওয়েবপৃষ্ঠার স্বাগত বিভাগের জন্য আমাদের শরীরের HTML কোড সংজ্ঞায়িত করুন:
<html> <body> <header> <h1 id="welcome_title">Welcome</h1> </header> </body> </html>
ডিফল্টরূপে, আমাদের <h1> ট্যাগে Welcome বিষয়বস্তু থাকবে . <header> ট্যাগ হল প্যারেন্ট ট্যাগ যেখানে আমাদের শিরোনামটি অবস্থিত। এর পরে, আমরা একটি <script> যোগ করতে যাচ্ছি আমাদের
… </header> <script> </script> </body> ...
আমাদের স্ক্রিপ্টের মধ্যে, আমরা আমাদের শিরোনাম নির্বাচন করতে যাচ্ছি এবং এর বিষয়বস্তু পরিবর্তন করতে যাচ্ছি:
var title = document.getElementByID("welcome_title");
title.textContent = "Welcome, Luke!";
getElementById() পদ্ধতি আমাদের শিরোনাম নির্বাচন করে। আমরা এই HTML উপাদানটিকে জাভাস্ক্রিপ্ট ভেরিয়েবলে বরাদ্দ করি যাকে title বলা হয় . আমাদের শিরোনামের বিষয়বস্তু "স্বাগত, লুক!" প্রদর্শন করতে পরিবর্তন করা হবে। আমরা textContent ব্যবহার করি শিরোনাম পরিবর্তন করার পদ্ধতি।
আসুন আমাদের কোড চালাই এবং দেখুন কি হয়। যদি আমরা আমাদের জাভাস্ক্রিপ্ট কনসোল খুলি, আমরা একটি ত্রুটি দেখতে পাব:
আমাদের কোড সঠিকভাবে কাজ করছে না. আমাদের শিরোনাম পরিবর্তন করা হয়নি:
সমাধান
আমরা document.getElementByID-এর জন্য ভুল কেস ব্যবহার করেছি নির্বাচক একটি বড় হাতের অক্ষর I ব্যবহার করার পরিবর্তে এবং একটি ছোট হাতের d , আমরা একটি বড় হাতের অক্ষর I ব্যবহার করেছি এবং D .
JavaScript আমাদের প্রোগ্রামটিকে getElementById কল করার জন্য নিবন্ধন করে না ফাংশন কারণ ফাংশনের নাম কেস সংবেদনশীল।
আমাদের কোড পরিবর্তন করতে হবে যাতে আমরা আমাদের ফাংশনের জন্য সঠিক কেস ব্যবহার করি:
var title = document.getElementById("welcome_title");
title.textContent = "Welcome, Luke!";
আমরা এখন Id ব্যবহার করছি ID এর পরিবর্তে আমাদের ফাংশন কলে। আমাদের নতুন কোড রান করা যাক:
আমাদের ব্যবহারকারীর নাম অন্তর্ভুক্ত করতে আমাদের প্রোগ্রাম সফলভাবে আমাদের শিরোনামের বিষয়বস্তু পরিবর্তন করে৷
উপসংহার
document.getElementById() পদ্ধতি ওয়েব পৃষ্ঠা থেকে একটি উপাদান নির্বাচন করে। এই পদ্ধতিটি আপনাকে একটি উপাদানের বিষয়বস্তু দেখতে এবং পরিবর্তন করতে দেয়।
আপনি এই পদ্ধতি ব্যবহার করার সময়, আপনি সঠিক ক্ষেত্রে ব্যবহার নিশ্চিত করা উচিত. আইডি সব বড় অক্ষরে নয়। আপনাকে একটি বড় হাতের I ব্যবহার করতে হবে এবং একটি ছোট হাতের d পদ্ধতিটি কাজ করার জন্য।
