JavaScript দিয়ে HTML অ্যাট্রিবিউট তৈরি এবং যোগ করার পদ্ধতি শিখুন।
মান লইয়ে নিন আপনার ওয়েবসাইটে একটি বাটন আছে যা ক্লিক করলে একটি ফাংশন এক্সিকিউট করার সাপেক্ষ। দুর্ভাগ্যবশত, কেউ ভুলে সেটিতে একটি ID বা ক্লাস ভ্যালু যোগ করেনি, এবং আপনার এইমomento HTML মার্কআপে ডায়রেক্ট এক্সেস নেই।
সৌভাগ্যক্রমে, আপনি শুধু একটি অ্যাট্রিবিউট তৈরি করে আপনার বাটন এলিমেন্টে JavaScript দিয়ে অ্যাটাচ করতে পারেন।
আমাদের ৩টি কাজ করতে হবে:
idটাইপের একটি অ্যাট্রিবিউট তৈরি করুন- একটি ভ্যালু (নাম) দিন
- নতুন অ্যাট্রিবিউট+ভ্যালুটিকে বাটন এলিমেন্টে যোগ করুন
HTML মার্কআপ
প্রথমে, HTML বাটন, যেটি দুর্ভাগ্যবশত কোনো ID অ্যাট্রিবিউট নেই (বুহু), এখনও:
<button>Click me!</button>JavaScript
আপনার বাটন সিলেক্ট করুন querySelector() ব্যবহার করে:
const button = document.querySelector('button')নোট:
আপনার ওয়েবসাইটে একাধিক বাটন থাকলে, আপনি সবসময় সিলেক্টর স্পেসিফাই করতে পারেন চেইনিং করে। উদাহরণস্বরূপ, যদি আপনার কুইস্টionate বাটন একটি div এলিমেন্টের ভিতরে থাকে যেটির একটি ইউনিক id বা ক্লাস অ্যাট্রিবিউট আছে, যেমন:
const button = document.querySelector('.service-section button')এন্ডনোট।
ঠিক আছে, এখন id টাইপের একটি অ্যাট্রিবিউট তৈরি করি:
const attribute = document.createAttribute('id')এবং এটিকে একটি ভ্যালু (নাম) দিন:
attribute.value = `js-button-run-function`এখন আপনার নতুন তৈরি অ্যাট্রিবিউটকে আপনার বাটন এলিমেন্টে অ্যাটাচ করুন:
button.setAttributeNode(attribute)এটাই সব!
এখন আপনি আপনার বাটন ভেরিয়েবল কনসোলে প্রিন্ট করলে দেখবেন আপনার বাটন আপগ্রেড হয়েছে:
console.log(button) // output: "<button id='js-button-run-function'>Click me</button>"গরেট, এখন আপনি JavaScript ব্যবহার করে এই বাটনকে এর ইউনিক ID দিয়ে সিলেক্ট করতে পারেন, এবং একটি ফাংশন তৈরি করতে পারেন যা ইউজার ক্লিক করলে রান করবে।
গুড মেজার হিসেবে, এটা কনফার্ম করি যে কাজ করছে। আপনার JavaScript ফাইলে এই কোড যোগ করুন:
// নতুন id ভ্যালু দিয়ে বাটন সিলেক্ট করুন const buttonRunFunction = document.querySelector('#js-button-run-function') // ক্লিক করলে এলার্ট বক্স দেখান buttonRunFunction.addEventListener('click', function() { alert('It works!') })যদি আপনি সবকিছু সঠিকভাবে করছেন, তবে এখন বাটনে ক্লিক করলে “It works!” বলে একটি এলার্ট বক্স পপ-আপ হবে।
সার কোড:
const button = document.querySelector('button') const attribute = document.createAttribute('id') attribute.value = `js-button-run-function` // নতুন অ্যাট্রিবিউট বাটনে অ্যাটাচ করুন button.setAttributeNode(attribute) // তার id দিয়ে বাটন সিলেক্ট করুন const buttonRunFunction = document.querySelector('#js-button-run-function') // বাটনে ক্লিক ইভেন্ট যোগ করুন buttonRunFunction.addEventListener('click', function() { alert('it works!') })