JavaScript দিয়ে একটি HTML এলিমেন্টের অ্যাট্রিবিউট ভ্যালু চেঞ্জ করার পদ্ধতি শিখুন।
মান লইয়ে নিন আপনার ওয়েবসাইটে একটি এ্যাঙ্কর এলিমেন্ট আছে, যার href অ্যাট্রিবিউট ভ্যালুতে একটি ভুল URL লিংক পাথ আছে।
এটি দেখার একটি কমন জায়গা হচ্ছে আপনার মেনু/নেভিগেশন বার:
<nav> <ul> <li> <a href="/path-to-your-page" id="some-id">Link</a> </li> </ul> </nav>আপনার ওয়েবসাইটের নিচে ফুটারে ইন্টারনাল ওয়েব পেজ লিংক থাকার আরেকটি কমন জায়গা।
মান লইয়ে নিন কেউ ভুল করেছে। আপনার href ভ্যালু /contact-me কিন্তু সেটি হওয়া উচিত /contact-us, এবং যেকোনো কারণে আপনি সরাসরি HTML কোডে সমাধান করতে পারছেন না (হয়তো ব্যাকএন্ডে রাইট এক্সেস নেই)।
আপনাকে এসোপ ফিক্স করতে হবে যাতে আপনার ভিজিটররা ক্লিক করলে ব্লাঙ্ক পেজ না দেখে।
আপনার যদি ফ্রন্টএন্ড কোডে এক্সেস থাকে, যেমন CMS (Content Management System) এর মাধ্যমে, তবে আপনি JavaScript ব্যবহার করে আপনার এ্যাঙ্কর এলিমেন্টের বিদ্যমান href ভ্যালু ওভাররাইড করতে পারেন, ব্যাকএন্ড ছুঁয়ে না।
আমি আপনাকে দুটি ভিন্ন পদ্ধতি দেখাব।
ID দিয়ে এলিমেন্ট সিলেক্ট করা
মান লইয়ে নিন আপনার HTML মার্কআপ এভাবে দেখে, প্রতিটি নেভ লিংকে ইউনিক ID আছে:
<nav> <ul> <li> <a href="/" id="home">Home</a> </li> <li> <a href="/services" id="services">Services</a> </li> <li> <a href="/contact-me" id="contact">Contact</a> </li> </ul> </nav>এখন আমরা Contact লিংকের href ভ্যালু চেঞ্জ করতে চাই।
প্রথমে, আপনার এ্যাঙ্কর/লিংক এলিমেন্ট সিলেক্ট করুন এর id দিয়ে:
const contactLink = document.querySelector('#contact')তারপর ডট নোটেশন ব্যবহার করে আপনার এ্যাঙ্কর এলিমেন্টের href অ্যাট্রিবিউট সিলেক্ট করুন এবং এটিকে /contact-us এর নতুন ভ্যালু দিন:
contactLink.href = '/contact-us'এটাই সব!
এখন আপনি কনসোলে লগ করলে দেখবেন আগের ভুল href অ্যাট্রিবিউট ভ্যালু নতুন সঠিক URL পাথ দিয়ে রিপ্লেস হয়েছে:
console.log(contactLink.href) // output: "https://your-domain.com/contact-us"সকল JS কোড:
// ID দিয়ে এ্যাঙ্কর/লিংক এলিমেন্ট সিলেক্ট করুন const contactLink = document.querySelector('#contact') // href ভ্যালু চেঞ্জ করুন contactLink.href = '/contact-us' // রেজাল্ট প্রিন্ট করুন console.log(contactLink.href)স্পেসিফিক স্ট্রিং ভ্যালু দিয়ে এলিমেন্ট সিলেক্ট করা
আপনি এমন সিচুয়েশনে থাকতে পারেন যেখানে আপনার HTML লিংক এলিমেন্টে ইউনিক id বা ক্লাস নেই। আপনার HTML মার্কআপ এভাবে দেখতে পারে
<nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/services">Services</a> </li> <li> <a href="/contact-me">Contact</a> </li> </ul> </nav>কোনো সমস্যা নেই। আপনি CSS3 সিলেক্টর ব্যবহার করে querySelector()-এ স্পেসিফাই করতে পারেন যে আপনি একটি এক্সাক্ট স্ট্রিং ভ্যালু সিলেক্ট করতে চান, এই কেসে /contact-me।
এখানে কীভাবে করবেন:
const contactLink = document.querySelector('a[href*="/contact-me"]')এখন আপনার ভেরিয়েবল থেকে href ভ্যালু প্রিন্ট করুন দেখতে পাবেন আপনি কি সত্যিকারের href ভ্যালু খুঁজে পেয়েছেন:
console.log(contactLink.href) // output: "https://your-domain.com/contact-me" পেলাম!
এখন আপনি আগের উদাহরণের মত href ভ্যালু সঠিক URL পাথে চেঞ্জ করতে পারেন:
contactLink.href = '/contact-us'সকল কোড:
// স্পেসিফিক href স্ট্রিং ভ্যালু দিয়ে লিংক সিলেক্ট করুন const contactLink = document.querySelector('a[href*="/contact-me"]') // href স্ট্রিং ভ্যালু চেঞ্জ করুন contactLink.href = '/contact-us' // রেজাল্ট প্রিন্ট করুন console.log(contactLink.href)