জাভাস্ক্রিপ্টে লিঙ্ক ক্লিক করার সময় ত্রুটি

আসুন একটি লিঙ্কে অপ্রত্যাশিত নেভিগেশন সম্পর্কিত একটি ত্রুটি নিয়ে আলোচনা করি। উদাহরণ হিসাবে, নিম্নলিখিত লিঙ্কটি দেওয়া আছে:

<a href="">link</a>

আমাদের লিঙ্কটি একটি ভেরিয়েবলে পাই:

let link = document.querySelector('a');

আমাদের লিঙ্কে একটি ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করি:

link.addEventListener('click', function() {
	console.log(this.textContent);
});

এবং এখানেই আমাদের জন্য একটি অবাক করা বিষয় রয়েছে। কোডটি সঠিকভাবে লেখা হয়েছে, তবে, কনসোলে কোন আউটপুট দেখা যায় না। ব্যাপারটি হল, ক্লিক করলে লিঙ্ক অনুসরণ করে নেভিগেশন ঘটে। যেহেতু href অ্যাট্রিবিউটে কিছু উল্লেখ করা নেই, তাই লিঙ্কটি বর্তমান পৃষ্ঠাতেই নির্দেশ করে।

এর মানে হল যে লিঙ্কে ক্লিক করলে পৃষ্ঠাটি পুনরায় লোড হয়। অর্থাৎ, আমাদের ডেটা কনসোলে প্রিন্ট হয়, তারপর পৃষ্ঠাটি পুনরায় লোড হয়, এবং কনসোল খালি হয়ে যায়।

যদি মনোযোগ দিয়ে দেখেন, তাহলে দেখতে পাবেন যে ক্লিকের মুহূর্তে কনসোলে ডেটা একটি ঝলকের জন্য দেখা যায়, তারপর অদৃশ্য হয়ে যায়। এটি এই ত্রুটির একটি বৈশিষ্ট্যসূচক লক্ষণ।

আসুন দেখি কিভাবে এই সমস্যার সমাধান করা যায়।

প্রথম সমাধান

লিঙ্কের href-এ একটি হ্যাশ চিহ্ন (#) দিতে হবে। এর ফলে লিঙ্কটি বর্তমান পৃষ্ঠার একটি নির্দিষ্ট অবস্থানের নির্দেশ করবে এবং লিঙ্কে ক্লিক করলে পৃষ্ঠা পুনরায় লোড হবে না। এটি করা যাক:

<a href="#">link</a>

দ্বিতীয় সমাধান

একটি আরও উন্নত পদ্ধতি হল preventDefault মেথড ব্যবহার করে ডিফল্ট অ্যাকশন বাতিল করা:

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});