JavaScript Onclick: ধাপে ধাপে গাইড

JavaScript onclick ইভেন্ট ব্যবহারকারী একটি বাটন বা অন্য কোনো ওয়েব এলিমেন্টে ক্লিক করলে একটি ফাংশন এক্সিকিউট করে। এই মেথডটি HTML ডকুমেন্টে ইনলাইন এবং জাভাস্ক্রিপ্ট ডকুমেন্টে—দুইভাবে ব্যবহার করা যায়।

জাভাস্ক্রিপ্টে কোডিং করার সময়, ব্যবহারকারী ওয়েব পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করলে কোড রান করানো একটি সাধারণ প্রয়োজন। উদাহরণস্বরূপ, ব্যবহারকারী একটি বাটন চাপলে কিছু ঘটাতে চাইতে পারেন। কিন্তু জাভাস্ক্রিপ্টে এই কার্যকারিতা কীভাবে ইমপ্লিমেন্ট করবেন?

এখানেই "onclick()" ইভেন্ট কাজে আসে। onclick ইভেন্ট সবচেয়ে সাধারণভাবে ব্যবহৃত ইভেন্ট টাইপগুলির এক। onclick ব্যবহার করে আপনি ব্যবহারকারী একটি বাটন বা আপনার ওয়েব পৃষ্ঠার অন্য কোনো এলিমেন্টে ক্লিক করলে কোড রান করতে পারেন।

এই সংক্ষিপ্ত গাইডে, আমরা onclick ফাংশন কীভাবে কাজ করে তা ব্যাখ্যা করব। আপনি আপনার কোডে onclick কীভাবে ব্যবহার করে একটি ওয়েবসাইটকে ইন্টারঅ্যাক্টিভ बना सकते हैं সেটা আলোচনা করব।

ইভেন্ট রিফ্রেশার

Onclick হলো একটি জাভাস্ক্রিপ্ট ইভেন্টের ধরন। ইভেন্ট হলো ব্রাউজারে ঘটা অ্যাকশন যা ব্যবহারকারী বা ব্রাউজার নিজে শুরু করতে পারে। ব্যবহারকারী একটি বাটন ক্লিক করা, ফর্ম সাবমিট করা, বা কীবোর্ডে একটি কী চাপা—এই সবই ইভেন্টের উদাহরণ। এই টিউটোরিয়ালে আমরা প্রথমটিতে ফোকাস করব: ব্যবহারকারী একটি এলিমেন্টে ক্লিক করলে।

ইভেন্ট ব্যবহার করে ডেভেলপাররা একটি ওয়েব পৃষ্ঠাকে ইন্টারঅ্যাক্টিভ করতে পারেন। আপনি ব্যবহারকারী বাটনে ক্লিক করলে একটি ফর্ম দৃশ্যমান করতে পারেন, বা ব্যবহারকারী ফর্ম সাবমিট করলে একটি মেসেজ দেখাতে পারেন।

ইভেন্টের দুটি মূল উপাদান আছে: ইভেন্ট হ্যান্ডলার এবং ইভেন্ট লিসেনার।

আপনি যখন একটি বাটন ক্লিক করেন, একটি কী চাপেন, বা একটি এলিমেন্টের ওপর হোভার করেন, একটি ইভেন্ট রান করে। ইভেন্ট হ্যান্ডলার হলো সেই কোড যা আপনার ইভেন্ট শুরু হলে রান করে। উদাহরণস্বরূপ, আপনি একটি বাটন ক্লিক করলে, ইভেন্ট হ্যান্ডলার রান করবে।

ইভেন্ট লিসেনার হলো একটি এলিমেন্টের (যেমন একটি বাটন) অংশ যা "শোনে" এবং আপনি সেটার সাথে ইন্টারঅ্যাক্ট করার জন্য অপেক্ষা করে। তারপর, লিসেনার ইভেন্ট হ্যান্ডলার এক্সিকিউট করে।

JavaScript onclick

JavaScript onclick ইভেন্ট আপনি একটি বাটন বা অন্য কোনো ওয়েব এলিমেন্টে ক্লিক করলে একটি ফাংশন এক্সিকিউট করে। উদাহরণস্বরূপ, একটি onclick ইভেন্ট বাটনে ক্লিক করলে একটি ডায়ালগ বক্স দেখাতে পারে।

HTML-এ onclick মেথডের সিনট্যাক্স:

<button onclick="codetorun">Click me</button>

এই HTML বাটনে ক্লিক করলে, "codetorun" জাভাস্ক্রিপ্ট ফাংশনটি এক্সিকিউট হবে। আমরা onclick অন্যান্য এলিমেন্টের সাথেও ব্যবহার করতে পারি, যেমন একটি div। onclick শুধু বাটনের জন্য সীমাবদ্ধ নয়।

আপনি সাদা জাভাস্ক্রিপ্টেও onclick ব্যবহার করতে পারেন। জাভাস্ক্রিপ্ট onclick মেথডের একটি উদাহরণ:

var item = document.getElementById("button");
item.onclick = function() {
  codetoexecute...
}

আমরা জাভাস্ক্রিপ্ট getElementById মেথড ব্যবহার করে আমাদের ওয়েব পৃষ্ঠা থেকে একটি এলিমেন্ট রিট্রিভ করি। যখন আমরা "button" আইডি 가진 এলিমেন্টে ক্লিক করি, আমাদের onclick ফাংশনটি এক্সিকিউট হবে।

বাটন onclick জাভাস্ক্রিপ্ট উদাহরণ

মান लीজিয়ে আপনি একটি p এলিমেন্ট বা প্যারাগ্রাফে ক্লিক করার পর ওয়েব পৃষ্ঠার কিছু টেক্সট পরিবর্তন করতে চান। আমরা onclick অ্যাট্রিবিউট ব্যবহার করে এই ফিচারটি একটি ওয়েবসাইটে ইমপ্লিমেন্ট করতে পারি। একটি HTML পৃষ্ঠা নিয়ে শুরু করি যেখানে একটি বাটন এবং কিছু টেক্সট আছে। আমরা একটি জাভাস্ক্রিপ্ট ফাইলও তৈরি করব যা আমাদের ইভেন্ট কোড ধারণ করবে।

index.html
<!DOCTYPE html>
<html>
<head>
  <title>onclick example</title>
</head>
<!-- Main body of code -->
<body>
  <button>Click here.</button>
  <p>This text will change when you click the button.</p>
</body>
<!-- Reference our JavaScript event code -->
<script src=“js/onclick.js”></script>
</html>

এটি একটি বেসিক ওয়েব পৃষ্ঠার উদাহরণ, কিন্তু এখনও এটি ইন্টারঅ্যাক্টিভ নয়। এই ওয়েব পৃষ্ঠা রান করলে, আমরা একটি বাটন এবং কিছু টেক্সট দেখব, কিন্তু আমাদের বাটনে ক্লিক করলে কিছুই হবে না। কারণ আমরা এখনও onclick স্ক্রিপ্ট ফাংশন ইমপ্লিমেন্ট করিনি।

এখন আমাদের ওয়েব পৃষ্ঠা প্রস্তুত, আমরা আমাদের onclick ইভেন্ট তৈরি করা শুরু করতে পারি। প্রথমে আমাদের বাটনে onclick() ইভেন্ট লিসেনার যোগ করতে হবে। এই ইভেন্টটি ব্যবহারকারী বাটনে ক্লিক করলে শোনবে।

index.html
...
<body>
  <button onclick=“changeParagraph()”>Click here.</button>
  <p>This text will change when you click the button.</p>
</body>
...

আমরা আমাদের "onclick.js" ফাইল তৈরি করব, যেটি changeParagraph() ইভেন্টের কোড ধারণ করবে। এই ইভেন্টটি আমাদের প্যারাগ্রাফ ( "p" এলিমেন্ট) এর টেক্সট অন্য কিছুর সাথে পরিবর্তন করবে।

onclick.js
const changeParagraph = () => {
  const paragraph = document.querySelector(“p”);
  paragraph.textContent = “This text has changed because you clicked the button.”
}

আমরা changeParagraph নামে একটি জাভাস্ক্রিপ্ট ফাংশন ডিফাইন করেছি। আমরা জাভাস্ক্রিপ্ট querySelector মেথড ব্যবহার করে আমাদের পৃষ্ঠার একটি প্যারাগ্রাফ সিলেক্ট করি। যখন আমরা প্রথমবার পৃষ্ঠা লোড করি, আমরা আমাদের বাটন এবং "This text will change when you click the button." টেক্সট দেখব।

বাটনে ক্লিক করার পর, আমাদের ওয়েব পৃষ্ঠা পরিবর্তন হয় এবং নতুন টেক্সট দেখায়:

সারসংক্ষেপ

মোটামুটি, onclick() হলো একটি জাভাস্ক্রিপ্ট ইভেন্ট যা আপনাকে নির্দিষ্ট কোড রান করার অনুমতি দেয় যখন ওয়েব পৃষ্ঠার একটি এলিমেন্টে ক্লিক করা হয়।

এতটুকু! উপরের কোড ব্যবহার করে, আমরা সফলভাবে একটি ওয়েবপেজ তৈরি করেছি যা বাটন চাপলে কোড রান করবে। আমাদের উপরের কোড শুধু টেক্সট পরিবর্তন করে, কিন্তু আপনি চাইলে এটিকে যত জটিল বা সরল করতে পারেন।

আপনি যদি ব্যবহারকারী বাটন চাপলে সতর্ক করতে চান, তবে জাভাস্ক্রিপ্টে alert() ফাংশন ব্যবহার করতে পারেন। আপনি যদি আপনার কোডে "if" স্টেটমেন্ট যোগ করতে চান, তবে সেটাও করতে পারেন।

আরও জাভাস্ক্রিপ্ট লার্নিং রিসোর্সের জন্য, আমাদের How to Learn JavaScript গাইড দেখুন।