MDN addEventListener() পদ্ধতিটিকে একটি ফাংশন হিসাবে বর্ণনা করে যেটিকে কল করা হবে যখনই নির্দিষ্ট ইভেন্ট টার্গেটে বিতরণ করা হয়। কোডটি কাজ করার জন্য, আপনাকে লক্ষ্যটি অ্যাক্সেস করতে হবে।
সাধারণ লক্ষ্যগুলি হল এলিমেন্ট, ডকুমেন্ট, উইন্ডো এবং যেকোনো বস্তু যা ইভেন্টকে সমর্থন করে (যেমন XMLHttpRequest)। এই নিবন্ধে, আমরা একটি উপাদান অ্যাক্সেস করতে চাই যাতে আমরা একটি নির্দিষ্ট ইভেন্টের লক্ষ্য হিসাবে এটিকে বরাদ্দ করতে পারি।
জাভাস্ক্রিপ্ট একটি ত্রুটি নিক্ষেপ করবে যখন আপনি একটি নির্দিষ্ট উপাদান আইডি, ক্লাস বা ড্যাশ সহ নাম সহ একটি নোডে একটি ইভেন্ট শ্রোতা যোগ করার চেষ্টা করবেন৷ জাভাস্ক্রিপ্ট ড্যাশ পছন্দ করে না (–), এটি এটিকে বিয়োগ হিসাবে বুঝবে। এই নিবন্ধটি একটি উপাদানের নামে একটি ড্যাশ ( – ) দ্বারা সৃষ্ট একটি জাভাস্ক্রিপ্ট ত্রুটি সমাধানের জন্য দুটি সমাধান প্রদান করে৷
সমাধান:ড্যাশের কারণে জাভাস্ক্রিপ্ট ত্রুটি কীভাবে সমাধান করা যায়
জাভাস্ক্রিপ্টকে ড্যাশকে বিয়োগ হিসাবে বোঝা থেকে আটকাতে স্ট্রিংগুলি গ্রহণকারী নোডটি নির্বাচন করার একটি বিকল্প উপায় ব্যবহার করুন৷
querySelector()
ব্যবহার করুনজাভাস্ক্রিপ্টে querySelector() একটি স্ট্রিং নেয় যা ড্যাশ অন্তর্ভুক্ত করতে পারে। স্ট্রিংফিকেশন নিশ্চিত করে যে জাভাস্ক্রিপ্ট ড্যাশকে বিয়োগ হিসাবে বোঝে না। MDN-এর মতে, ডকুমেন্ট পদ্ধতি querySelector() নথির মধ্যে প্রথম উপাদান প্রদান করে যা নির্দিষ্ট নির্বাচক বা নির্বাচকদের গ্রুপের সাথে মেলে। কোনো মিল পাওয়া না গেলে, নাল ফেরত দেওয়া হয়।
এটি আপনাকে আইডি নির্বাচক যেমন ব্যবহার করে একটি নির্দিষ্ট আইডি সহ একটি উপাদান নির্বাচন করতে দেয় `e.target.new-task-description` এর পরিবর্তে `e.target.querySelector('#new-task-description')` ব্যবহার করুন।
আপনি ক্লাস সিলেক্টর ব্যবহার করে একটি ক্লাস সহ একটি উপাদান নির্বাচন করতে পারেন যেমন `e.target.querySelector('.new-task-description')`।
নোডের নাম পরিবর্তন করুন
একটি হ্যাক সমাধান আছে যা সুপারিশ করা হয় না কিন্তু কাজ করে। আইডি বা ক্লাসের নামের ড্যাশটিকে একটি আন্ডারস্কোর দিয়ে প্রতিস্থাপন করে নোডের নাম পরিবর্তন করুন বা নোডের সমস্ত রেফারেন্সে ড্যাশটি সরান, যেমন `e.target.new_task_description.value` এবং `e.target.newtaskdescription.value`।
2টি সমাধানের যেকোনো একটি জাভাস্ক্রিপ্ট ত্রুটি ঠিক করবে; যাইহোক, একটি querySelector ব্যবহার করা পছন্দের সমাধান কারণ এটি আরও মার্জিত।
একটি পরিবর্তনশীল তৈরি করা
আরেকটি সমাধান যা আমি অন্বেষণ করেছি তা হল টাস্কইনপুট নামক একটি ভেরিয়েবল তৈরি করা, সেই ভেরিয়েবলে নোড বরাদ্দ করা এবং তারপরে ভেরিয়েবল টাস্কইনপুটকে লক্ষ্যে চেইন করা যেমন newTextInput =document.getElementById("new-task-description") কিন্তু জাভাস্ক্রিপ্ট যেমনটা কাজ করেনি যখন আমি এটিকে DOM-এ পরীক্ষা করেছিলাম তখন আমি আশা করেছিলাম।
চেষ্টা করার অন্যান্য পদ্ধতি
যখন আমি getElementByID() পদ্ধতি চেইন করার চেষ্টা করেছি যেমন e.target.getElementByID('new-task-description'), JavaScript একটি ত্রুটি ছুঁড়েছে। সম্ভবত একটি সিনট্যাক্স ত্রুটি ছিল যা আমি করেছি এবং ধরতে পারিনি৷
আমি যদি সিনট্যাক্স ত্রুটি না করে থাকি তাহলে তত্ত্বগতভাবে এর অর্থ হল getElementByClassName() পদ্ধতিটি চেইন করাও কাজ করবে না।
অন্যান্য পদ্ধতি আছে যা আমি চেষ্টা করিনি যে আপনি উপাদানের উপর নির্ভর করে চেক আউট করতে চাইতে পারেন।
আপনি একটি নির্দিষ্ট HTML ট্যাগের সমস্ত উপাদান নির্বাচন করতে document.getElementsByTagName() পদ্ধতি ব্যবহার করতে পারেন, যেমন:
getElementsByTagName('li')
এবং আপনি একটি নির্দিষ্ট নামের বৈশিষ্ট্য সহ সমস্ত উপাদান নির্বাচন করতে document.getElementsByName() পদ্ধতি ব্যবহার করতে পারেন, যেমন:
getElementsByName('নতুন-টাস্ক')
পরীক্ষা এবং শেখা
আমি ফ্ল্যাটিরন স্কুল সফটওয়্যার ইঞ্জিনিয়ারিং ফ্লেক্স প্রোগ্রামে নথিভুক্ত হয়েছি এবং আমি বেশ কয়েকটি ল্যাবের মাধ্যমে কাজ করছি। আমি এটি লিখতে অনুপ্রাণিত হয়েছিলাম কারণ জাভাস্ক্রিপ্ট কেন আমাকে একটি ত্রুটি ছুঁড়েছে তা সনাক্ত করতে সাহায্য করার জন্য আমি একটি নিবন্ধ খুঁজে পাইনি৷
সৌভাগ্যক্রমে, ফ্ল্যাটিরন স্কুলের প্রযুক্তিগত প্রশিক্ষক রয়েছে যা আমাকে সনাক্ত করতে সাহায্য করেছে যে জাভাস্ক্রিপ্ট ড্যাশকে বিয়োগ হিসাবে ব্যাখ্যা করার কারণে ত্রুটিটি ঘটেছে, যা আমি তাদের সাহায্য ছাড়া অনুমান করতে পারতাম না কারণ আমার সিনট্যাক্স সঠিক ছিল। আশা করি, অন্যরা যারা জাভাস্ক্রিপ্ট শিখছেন যাদের প্রযুক্তিগত কোচের অ্যাক্সেস নেই তারা এই নিবন্ধটিকে সহায়ক বলে মনে করেন। শুভ কোডিং!
