এই নিবন্ধটি সংক্ষিপ্তভাবে প্রদর্শন করে যে DOM এলিমেন্ট 'ক্লিক()' পদ্ধতি কী এবং কীভাবে এটি HTML-এ ব্যবহার করবেন?
HTML এ DOM এলিমেন্ট “click()” পদ্ধতি কি?
যখন ক্লিক() পদ্ধতিটি একটি এইচটিএমএল এলিমেন্টে কল করা হয়, তখন এটি একটি ব্যবহারকারীকে মাউসের সাহায্যে এলিমেন্টে ক্লিক করার অনুকরণ করে, যার ফলে যেকোনো সংযুক্ত ইভেন্ট হ্যান্ডলারকে ট্রিগার করে। এটি ডেভেলপারদের বিভিন্ন ইন্টারেক্টিভ ক্রিয়া সম্পাদন করতে দেয় যেমন লিঙ্ক খোলা, ফর্ম জমা দেওয়া, বা ফিজিক্যাল মাউস ক্লিকের প্রয়োজন ছাড়াই উপাদানগুলির দৃশ্যমানতা টগল করা। এটি ইন্টারেক্টিভ এবং প্রতিক্রিয়াশীল ওয়েব পেজ তৈরি করতে সাহায্য করে।
কিভাবে HTML এ DOM এলিমেন্ট “click()” পদ্ধতি ব্যবহার করবেন?
ক্লিক() পদ্ধতি ব্যবহার করার জন্য, ব্যবহারকারীদের প্রথমে একটি ক্লিক-অন অনুকরণ করতে HTML উপাদানের একটি রেফারেন্স পেতে হবে। এটি যেকোনো স্ট্যান্ডার্ড DOM ট্রাভার্সাল বা ক্যোয়ারী পদ্ধতি ব্যবহার করে করা যেতে পারে, যেমন ' getElementById ', ' getElementsByClassName ', ' querySelector ', বা ' querySelectorAll ”
আসুন 'ক্লিক()' পদ্ধতির আরও ভাল ব্যাখ্যার জন্য একটি উদাহরণ দিয়ে হেঁটে যাই।
উদাহরণ: HTML চেকবক্স এবং রেডিও বোতাম উপাদান
একটি উদাহরণ বিবেচনা করা হয় যেখানে ' ক্লিক() ” পদ্ধতিটি HTML চেকবক্স এবং রেডিও বোতাম উপাদানগুলির সাথে ব্যবহার করা হয়। নীচের কোড অনুসরণ করুন:
< ফর্ম >
< ইনপুট
প্রকার = 'চেকবক্স'
আইডি = 'চেকবক্স1'
মাউসওভার = 'চেকবক্সের জন্য()'
>
Linuxhint দ্বারা চালিত
< ইনপুট
প্রকার = 'রেডিও'
আইডি = 'রেডিও বোতাম'
মাউসওভার = 'রেডিওর জন্য()'
>
Linuxhint দ্বারা চালিত
< / ফর্ম >
উপরের কোড স্নিপেটে:
- প্রথমে, ট্যাগ ব্যবহার করে ওয়েবপেজে একটি চেকবক্স তৈরি করা হয় যার একটি টাইপ সেট করা হয় “ চেকবক্স ”
- এরপর অনুষ্ঠান শ্রোতা “ মাউসওভার ' চেকবক্সের সাথে সংযুক্ত করা হয় এবং 'কে আহ্বান করে চেকবক্সের জন্য() ' ফাংশন।
- একইভাবে, ' রেডিও ' বোতামটি ' ব্যবহার করে তৈরি করা হয় <ইনপুট> ” ট্যাগ, এবং ইভেন্ট শ্রোতা এটি সংযুক্ত করা হয়. কিন্তু এবার, “ রেডিওর জন্য() ' ফাংশন আহ্বান করা হচ্ছে.
ওয়েবপৃষ্ঠায় একটি এইচটিএমএল উপাদান তৈরি করার পরে, এখন যোগ করার সময় এসেছে ' ক্লিক() 'পদ্ধতি:
< লিপি >
চেকবক্সের জন্য ফাংশন ( ) {
document.getElementById ( 'চেকবক্স1' ) .ক্লিক ( ) ;
}
রেডিওর জন্য ফাংশন ( ) {
document.getElementById ( 'রেডিও বোতাম' ) .ক্লিক ( ) ;
}
< / লিপি >
উপরের কোড স্নিপেটে:
- প্রথমে, দুটি জাভাস্ক্রিপ্ট ফাংশন সংজ্ঞায়িত করুন, ' চেকবক্সের জন্য() ' এবং ' রেডিওর জন্য() ”
- এই ফাংশনগুলি ব্যবহার করে ' document.getElementById() নির্দিষ্ট আইডি 'চেকবক্স1' এবং 'রেডিওবাটন' সহ পৃষ্ঠায় HTML উপাদানগুলির রেফারেন্স পাওয়ার পদ্ধতি৷
- HTML এলিমেন্টে ক্লিক করার সিমুলেশনের জন্য ক্লিক() পদ্ধতি ব্যবহার করা হয়। যখন কল করা হয় তখন এই ফাংশনটি চালু বা বন্ধের অবস্থা টগল করে।
উপরের কোড স্নিপেটগুলি কার্যকর করার পরে, আউটপুটটি এইরকম প্রদর্শিত হবে:
উপরের জিআইএফটি ব্যাখ্যা করে যে 'ক্লিক()' পদ্ধতি ব্যবহার করে চেকবক্স এবং রেডিও বোতামের স্থিতি পরিবর্তন হচ্ছে।
উপসংহার
ক্লিক() পদ্ধতিটি জাভাস্ক্রিপ্টের মাধ্যমে একটি ওয়েব পৃষ্ঠার সাথে ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করার জন্য বিশেষভাবে কার্যকর।
উপাদানটিতে শারীরিকভাবে ক্লিক করার জন্য ব্যবহারকারীর উপর নির্ভর করার পরিবর্তে, ক্লিক ইভেন্টটিকে প্রোগ্রামেটিকভাবে অনুকরণ করতে ক্লিক() পদ্ধতিটি ব্যবহার করুন। এটি ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব ডিজাইন তৈরি করার জন্য দরকারী। এই নিবন্ধটি সফলভাবে HTML এ DOM উপাদান 'ক্লিক()' পদ্ধতির অর্থ প্রদর্শন করেছে।