জাভাস্ক্রিপ্টে হাইফনযুক্ত এলিমেন্টে ইভেন্ট লিসেনার আট্যাচ করার পদ্ধতি

MDN addEventListener() মেথডকে একটি ফাংশন হিসেবে বর্ণনা করে যা নির্দিষ্ট ইভেন্ট টার্গেটে ডেলিভার হলে কল হবে। কোডটি কাজ করার জন্য, আপনাকে টার্গেট এক্সেস করতে হবে।

সাধারণ টার্গেট হচ্ছে Element, Document, Window, এবং যেকোনো অবজেক্ট যা ইভেন্ট সাপোর্ট করে (যেমন XMLHttpRequest)। এই নিবন্ধে, আমরা একটি এলিমেন্ট এক্সেস করতে চাই যাতে আমরা সেটিকে একটি নির্দিষ্ট ইভেন্টের জন্য টার্গেট হিসেবে অ্যাসাইন করতে পারি।

জাভাস্ক্রিপ্ট এরর থ্রো করে যখন আপনি একটি নির্দিষ্ট এলিমেন্ট ID, ক্লাস, বা নেমের সাথে একটি ড্যাশ ( - ) সহ নোডে ইভেন্ট লিসেনার আড করতে চান। জাভাস্ক্রিপ্ট ড্যাশ ( – ) পছন্দ করে না, এটি এটিকে একটি মাইনাস হিসেবে বুঝে। এই নিবন্ধটি একটি ড্যাশ ( – ) এলিমেন্টের নেমে থাকায় জাভাস্ক্রিপ্ট এরর সমাধান করার দুটি সমাধান প্রদান করে।

সমাধান: ড্যাশের কারণে জাভাস্ক্রিপ্ট এরর সমাধান করা

জাভাস্ক্রিপ্টকে ড্যাশকে মাইনাস হিসেবে বুঝতে বাধা দিতে একটি স্ট্রিং নেওয়া সিলেকশন মেথড ব্যবহার করুন।

querySelector() ব্যবহার করুন

জাভাস্ক্রিপ্টে querySelector() একটি স্ট্রিং নেয় যাতে ড্যাশ থাকতে পারে। স্ট্রিংফিকেশন নিশ্চিত করে যে জাভাস্ক্রিপ্ট ড্যাশকে মাইনাস হিসেবে বুঝছে না। MDN অনুযায়ী, Document মেথড querySelector() ডকুমেন্টের ভিতরে প্রথম Element রিটার্ন করে যা স্পেসিফাইড সিলেক্টর বা সিলেক্টর গ্রুপের সাথে ম্যাচ করে। কোনো ম্যাচ না পাওয়া গেলে, null রিটার্ন করা হয়।

এটি আপনাকে একটি স্পেসিফিক ID-ওয়ালা এলিমেন্ট সিলেক্ট করতে দেয় ID সিলেক্টর ব্যবহার করে যেমন `e.target.new-task-description` এর বদলে `e.target.querySelector('#new-task-description')` ব্যবহার করুন।

আপনি ক্লাস সিলেক্টর ব্যবহার করে একটি ক্লাস-ওয়ালা এলিমেন্টও সিলেক্ট করতে পারেন যেমন `e.target.querySelector('.new-task-description')`।

নোড রিনেম করুন

একটি 핵 সমাধান যা রিকমেন্ডেড নয় কিন্তু কাজ করে। নোডটি রিনেম করুন ID বা ক্লাস নেমের ড্যাশকে আন্ডারস্কোর দিয়ে রিপ্লেস করে বা সIMPলি সব রেফারেন্স থেকে ড্যাশ রিমুভ করে, যেমন `e.target.new_task_description.value` এবং `e.target.newtaskdescription.value`।

উপরের ২টি সমাধান যেকোনো একটি জাভাস্ক্রিপ্ট এরর ফিক্স করবে; যাইহোক, querySelector ব্যবহার করা প্রিয় সমাধান কারণ এটি আরও ইলিগ্যান্ট।

একটি ভেরিয়েবল তৈরি করা

আমার এক্সপ্লোর করা আরেকটি সমাধান ছিল taskInput নামক একটি ভেরিয়েবল তৈরি করা, নোডটিকে সেটি অ্যাসাইন করা, এবং তারপর ভেরিয়েবল taskInput কে টার্গেটের সাথে চেইন করা যেমন `newTextInput = document.getElementById("new-task-description")` কিন্তু জাভাস্ক্রিপ্ট আমার আশা অনুযায়ী কাজ করেনি যখন আমি DOM-এ এটি টেস্ট করলাম।

অন্যান্য চেষ্টা করার মেথড

যখন আমি getElementByID() মেথড চেইন করার চেষ্টা করলাম যেমন `e.target.getElementByID('new-task-description')`, জাভাস্ক্রিপ্ট এরর থ্রো করল। সম্ভবত আমার কোনো সিনট্যাক্স এরর ছিল যা আমি ক্যাচ করিনি।

যদি আমি সিনট্যাক্স এরর না করতাম তবে তئরেটিক্যালি মানে সেটি যে getElementByClassName() মেথড চেইন করলেও কাজ করবে না।

অন্যান্য মেথডও আছে যা আমি ট্রাই করিনি যা আপনি এলিমেন্টের ওপর নির্ভর করে চেক আউট করতে পারেন।

আপনি document.getElementsByTagName() মেথড ব্যবহার করতে পারেন একটি স্পেসিফিক HTML ট্যাগের সব এলিমেন্ট সিলেক্ট করতে, এরকম:

getElementsByTagName('li')

এবং আপনি document.getElementsByName() মেথড ব্যবহার করতে পারেন একটি স্পেসিফিক name অ্যাট্রিবিউটের সব এলিমেন্ট সিলেক্ট করতে, এরকম:

getElementsByName('new-task')

টেস্টিং এবং লার্নিং

আমি Flatiron School Software Engineering ফ্লেক্স প্রোগ্রামে এনরোলড এবং আমি বেশ কিছু ল্যাবের মাধ্যমে কাজ করছি। এটি লিখতে অনুপ্রাণিত হয়েছিল কারণ আমি কোনো আর্টিকেল খুঁজে পাইনি যা আমাকে হেল্প করত কেন জাভাস্ক্রিপ্ট আমাকে এরর থ্রো করছে।

সৌভাগ্যক্রমে, Flatiron School-এ টেকনিক্যাল কোচরা আছে যারা আমাকে হেল্প করল শনাক্ত করতে যে এররটি ড্যাশকে মাইনাস হিসেবে ইন্টারপ্রেট করার জাভাস্ক্রিপ্টের কারণে হয়েছে, যা আমি কখনো অনুমান করতাম না কারণ আমার সিনট্যাক্স সঠিক ছিল। আশা করি অন্যরা যারা জাভাস্ক্রিপ্ট শিখছেন কিন্তু টেকনিক্যাল কোচের অ্যাক্সেস নেই তারা এই আর্টিকেলটি হেল্পফুল পাবেন। হ্যাপি কোডিং!