কখনও কখনও একজন ডেভেলপারকে বোতামটির আইডি জানতে হয় যা ব্যবহারকারী একটি ওয়েবপেজে পরবর্তী পদক্ষেপের সিদ্ধান্ত নিতে ক্লিক করেছেন। আপনি এই লেখার মধ্যে দেখতে পাবেন, এটি ভ্যানিলা জাভাস্ক্রিপ্ট এবং jQuery উভয় মাধ্যমে করা যেতে পারে। সুতরাং, চলুন শুরু করা যাক:
প্রথমে, আমরা একটি সাধারণ HTML ওয়েবপেজ তৈরি করব যার পৃষ্ঠার কেন্দ্রে দুটি বোতাম রয়েছে:
DOCTYPE html >
< html >
< শরীর >
< কেন্দ্র >
< div শৈলী = 'মার্জিন-টপ: 50px;' >
< h2 > নিম্নলিখিত বোতামগুলির একটিতে ক্লিক করুন h2 >
< বোতাম আইডি = 'বোতাম_এক' শৈলী = 'প্রস্থ: 100px; উচ্চতা: 40px; মার্জিন-ডান: 10px;' > 1 বোতাম >
< বোতাম আইডি = 'বোতাম_দুই' শৈলী = 'প্রস্থ: 100px; উচ্চতা: 40px;' > দুই বোতাম >
div >
কেন্দ্র >
শরীর >
html >
কিভাবে JavaScript ব্যবহার করে ক্লিক করা বাটনের আইডি পাবেন?
আমরা বিভিন্ন পদ্ধতিতে JavaScript ব্যবহার করে ক্লিক করা বাটনের ID পেতে পারি। আমাদের প্রথম পদ্ধতিতে, আমরা সমস্ত বোতাম ট্যাগের নোডেলিস্ট পাব এবং সেগুলিকে একটি ভেরিয়েবলের মধ্যে সংরক্ষণ করব। তারপরে ক্লিক করা বোতামটির আইডি পেতে আমরা নোডেলিস্টের উপর পুনরাবৃত্তি করব:
< লিপি >
var বোতাম = document.getElementsByTagName ( 'বোতাম' ) ;
জন্য ( দিন সূচক = 0 ; সূচক < buttons.length; সূচক++ ) {
বোতাম [ সূচক ] .onclick = ফাংশন ( ) {
সতর্ক ( এই.আইডি ) ;
}
}
লিপি >
আমরা প্রতিটি বোতাম দিয়ে সেট-আপ করতে পারি অনক্লিক পৃথকভাবে ঘটনা:
DOCTYPE html >
< html >
< শরীর >
< কেন্দ্র >
< div শৈলী = 'মার্জিন-টপ: 50px;' >
< h2 > নিম্নলিখিত বোতামগুলির একটিতে ক্লিক করুন h2 >
< বোতাম আইডি = 'বোতাম_এক' শৈলী = 'প্রস্থ: 100px; উচ্চতা: 40px; মার্জিন-ডান: 10px;' অনক্লিক = 'alertId(this.id)' > 1 বোতাম >
< বোতাম আইডি = 'বোতাম_দুই' শৈলী = 'প্রস্থ: 100px; উচ্চতা: 40px;' অনক্লিক = 'alertId(this.id)' > দুই বোতাম >
div >
কেন্দ্র >
শরীর >
< লিপি >
ফাংশন সতর্কতা আইডি ( আইডি ) {
সতর্ক ( আইডি )
}
লিপি >
html >
কিভাবে jQuery ব্যবহার করে ক্লিক করা বাটনের আইডি পাবেন?
jQuery এর বিভিন্ন পদ্ধতি রয়েছে যা একটি ক্লিক করা বোতামের আইডি পেতে ব্যবহার করা যেতে পারে। আমরা দিয়ে শুরু করব ক্লিক() পদ্ধতি যা একটি নির্বাচকের উপর প্রয়োগ করা হয় এবং একটি ঐচ্ছিক যুক্তি হিসাবে একটি ফাংশনের নাম নেয়:
DOCTYPE html >
< html >
< শরীর >
< কেন্দ্র >
< div শৈলী = 'মার্জিন-টপ: 50px;' >
< h2 > নিম্নলিখিত বোতামগুলির একটিতে ক্লিক করুন h2 >
< বোতাম আইডি = 'বোতাম_এক' শৈলী = 'প্রস্থ: 100px; উচ্চতা: 40px; মার্জিন-ডান: 10px;' অনক্লিক = 'alertId(this.id)' > 1 বোতাম >
< বোতাম আইডি = 'বোতাম_দুই' শৈলী = 'প্রস্থ: 100px; উচ্চতা: 40px;' অনক্লিক = 'alertId(this.id)' > দুই বোতাম >
div >
কেন্দ্র >
শরীর >
< লিপি >
$ ( 'বোতাম' ) .ক্লিক ( সতর্কতা আইডি ( $ ( এই ) .attr ( 'আইডি' ) ) ) ;
ফাংশন সতর্কতা আইডি ( আইডি ) {
সতর্ক ( আইডি )
}
লিপি >
html >
এছাড়াও আমরা ব্যবহার করতে পারেন চালু() উপাদানের সাথে ইভেন্ট হ্যান্ডলার সংযুক্ত করার পদ্ধতি। দ্য চালু() পদ্ধতিটি অন্য কিছু ঐচ্ছিক আর্গুমেন্টের সাথে একটি যুক্তি হিসাবে অন্তত একটি ইভেন্ট নেয়:
< html >
< শরীর >
< কেন্দ্র >
< div শৈলী = 'মার্জিন-টপ: 50px;' >
< h2 > নিম্নলিখিত বোতামগুলির একটিতে ক্লিক করুন h2 >
< বোতাম আইডি = 'বোতাম_এক' শৈলী = 'প্রস্থ: 100px; উচ্চতা: 40px; মার্জিন-ডান: 10px;' অনক্লিক = 'alertId(this.id)' > 1 বোতাম >
< বোতাম আইডি = 'বোতাম_দুই' শৈলী = 'প্রস্থ: 100px; উচ্চতা: 40px;' অনক্লিক = 'alertId(this.id)' > দুই বোতাম >
div >
কেন্দ্র >
শরীর >
< লিপি >
$ ( 'বোতাম' ) .চালু ( 'ক্লিক' , সতর্কতা আইডি ( $ ( এই ) .attr ( 'আইডি' ) ) ) ;
ফাংশন সতর্কতা আইডি ( আইডি ) {
সতর্ক ( আইডি )
}
লিপি >
html >
উপসংহার
একটি ক্লিক করা বোতামের আইডি প্লেইন জাভাস্ক্রিপ্ট এবং jQuery উভয় মাধ্যমেই অ্যাক্সেস করা যায়। আমরা এই ধরনের চারটি পদ্ধতি নিয়ে আলোচনা করেছি এবং এই লেখায় গভীরভাবে বিস্তারিত এবং প্রাসঙ্গিক উদাহরণ দিয়েছি।