জাভাস্ক্রিপ্টে লিঙ্ক ট্রানজিশন নিষেধাজ্ঞা ত্রুটি

ধরুন আমাদের একটি লিঙ্ক আছে:

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

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

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

আমাদের লিঙ্কে একটি ক্লিক হ্যান্ডলার সংযুক্ত করি। পৃষ্ঠা রিলোড এড়ানোর জন্য লিঙ্কে ট্রানজিশন বাতিল করি:

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

মনে হতে পারে যে আমরা নিজেদিকে অপ্রত্যাশিত আচরণ থেকে সম্পূর্ণরূপে রক্ষা করেছি। বাস্তবে তা নয়। বিষয়টি হল যে একটি সিনট্যাক্স ত্রুটি ঘটলে জাভাস্ক্রিপ্ট কোডটি কার্যকর হবে না, লিঙ্ক ব্লক কাজ করবে না, এবং এটিতে ট্রানজিশন ঘটবে।

এই ক্ষেত্রে, আমরা কোড এক্সিকিউশনের ফলাফলও দেখব না, না কনসোলে ত্রুটি, কারণ পৃষ্ঠাটি রিলোড হবে। আসুন ইচ্ছাকৃতভাবে কোডে একটি ত্রুটি করি এবং অনুশীলনে দেখি:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // সিনট্যাক্স ত্রুটি
	event.preventDefault();
});

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

অবশ্যই, আমরা ত্রুটির পাঠ্য পড়তে সক্ষম হব না, যা এটি খুঁজে পাওয়াকে উল্লেখযোগ্যভাবে কঠিন করে তোলে। যাইহোক, একটি চতুর কৌশল আছে। লিঙ্কের href-এ একটি হ্যাশ চিহ্ন (#) দিতে হবে। এই ক্ষেত্রে লিঙ্কে ট্রানজিশন ঘটা বন্ধ হয়ে যাবে এবং আমরা কনসোলে নিক্ষিপ্ত ত্রুটিটি দেখতে পাব:

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