কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি এইচটিএমএল অ্যাট্রিবিউট তৈরি এবং যুক্ত করবেন

জানুন কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি এইচটিএমএল অ্যাট্রিবিউট তৈরি এবং যোগ করতে হয়।

বলুন আপনার ওয়েবসাইটে একটি বোতাম আছে যেটিতে ক্লিক করার সময় একটি ফাংশন চালানোর কথা। দুর্ভাগ্যবশত, কেউ বোতামটিতে একটি আইডি বা শ্রেণী মান যোগ করতে ভুলে গেছে, এবং এই মুহূর্তে আপনার HTML মার্কআপে সরাসরি অ্যাক্সেস নেই।

সৌভাগ্যবশত, আপনি জাভাস্ক্রিপ্ট ব্যবহার করে শুধুমাত্র একটি বৈশিষ্ট্য তৈরি করতে এবং আপনার বোতাম উপাদানের সাথে সংযুক্ত করতে পারেন।

আমাদের 3টি জিনিস করতে হবে:

• id প্রকারের একটি বৈশিষ্ট্য তৈরি করুন
• এটিকে একটি মান দিন (নাম)
• বোতাম উপাদানটিতে নতুন বৈশিষ্ট্য + মান যোগ করুন

HTML মার্কআপ

প্রথমত, HTML বোতাম, যার দুঃখজনকভাবে কোনো আইডি অ্যাট্রিবিউট নেই (বুহু), এখনো:

<button>Click me!</button>

জাভাস্ক্রিপ্ট

querySelector() ব্যবহার করে আপনার বোতাম নির্বাচন করুন :

const button = document.querySelector('button')

দ্রষ্টব্য:

আপনার ওয়েবসাইটে একাধিক বোতাম থাকলে, আপনি সর্বদা এটিকে চেইন করে নির্বাচককে নির্দিষ্ট করতে পারেন। উদাহরণস্বরূপ, যদি আপনার প্রশ্নে থাকা বোতামটি একটি অনন্য আইডি বা ক্লাস অ্যাট্রিবিউট সহ একটি ডিভ উপাদানের ভিতরে থাকে, যেমন:

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>"

দুর্দান্ত, এখন আপনি জাভাস্ক্রিপ্ট ব্যবহার করে এই বোতামটিকে এর অনন্য আইডির উপর ভিত্তি করে নির্বাচন করতে পারেন এবং একটি ফাংশন তৈরি করতে পারেন যা ব্যবহারকারীরা বোতামে ক্লিক করলে চলবে৷

ভাল পরিমাপের জন্য, আসুন নিশ্চিত করি যে এটি কাজ করে। এই কোডটি আপনার জাভাস্ক্রিপ্ট ফাইলে যোগ করুন:

// Select button via its new id value
const buttonRunFunction = document.querySelector('#js-button-run-function')

// On click show an alert box
buttonRunFunction.addEventListener('click', function() {
	alert('It works!')
})

আপনি যদি সবকিছু সঠিকভাবে করেন, তাহলে আপনার এখন "এটি কাজ করে!" বলে একটি সতর্কতা বাক্স দেখতে হবে। আপনি বোতামে ক্লিক করলে পপ আপ হয়।

সমস্ত কোড:

const button = document.querySelector('button')
const attribute = document.createAttribute('id')

attribute.value = `js-button-run-function`

// Attach new attribute to the button
button.setAttributeNode(attribute)

// Select button via its id 
const buttonRunFunction = document.querySelector('#js-button-run-function')

// Add click event to the button
buttonRunFunction.addEventListener('click', function() {
	alert('it works!')
})