মূলঃ HTML Button onclick – JavaScript Click Event Tutorial, লেখকঃ Kolade Chris

যখনই আপনি কোন ওয়েবসাইটে যান তখন হয়তো আপনি কোন এলিমেন্টের উপরে ক্লিক করেন যেমন লিংক বা বাটন।

লিংকগুলি আপনাকে ঐ পেজের নির্দিষ্ট কোন অংশে, ঐ ওয়েবসাইটের অন্য কোন পেজে বা সম্পূর্ণ আলাদা কোন ওয়েবসাইটে নিয়ে যায়। অন্যদিকে, বাটনগুলি সাধারণত জাভাস্ক্রিপ্ট ইভেন্ট দ্বারা চালিত হয় যাতে তারা নির্দিষ্ট কোন ফাংশনালিটি ট্রিগার করতে পারে।

এই টিউটোরিয়ালে আমরা জাভাস্ক্রিপ্টে ক্লিক ইভেন্ট এক্সেকিউট করার দুটি পদ্ধতি শিখবো।

প্রথমে আমরা দেখবো onclick স্টাইল যা আপনি সরাসরি HTML পেজ থেকেই ব্যবহার করতে পারেন। তারপর আমরা জানবো অপেক্ষাকৃত নতুন "click" eventListener যার সাহায্যে আপনি জাভাস্ক্রিপ্টকে HTML থেকে আলাদা করে ফেলতে পারেন তা কিভাবে কাজ করে।

জাভাস্ক্রিপ্টে onclick ইভেন্টটি কিভাবে ব্যবহার করবেন

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

আপনি যে জাভাস্ক্রিপ্ট ফাংশনটি এক্সিকিউট করতে চান তা আপনি বাটনটির ওপেনিং ট্যাগের মধ্যে লিখবেন।

বেসিক onclick সিনট্যাক্স

<element onclick="functionToExecute()">Click</element>

উদাহরণস্বরূপ

<button onclick="functionToExecute()">Click</button>

উল্লেখ্য, onclick অ্যাট্রিবিউটটি সম্পূর্ণ জাভাস্ক্রিপ্ট। অ্যাট্রিবিউটটি মান হিসেবে একটি ফাংশন নেয় যা বাটনটিতে ক্লিক করা হলে এক্সিকিউট হবে।

জাভাস্ক্রিপ্টে কোন ফাংশনকে ইনভোক ক্রয়ার জন্য এটিকে নাম দিয়ে কল করতে হবে এবং ফাংশন আইডেন্টিফায়ার (ফাংশনের নাম) এর পরে বন্ধনী দিয়ে দিতে হবে।

onclick ইভেন্টের উদাহরণ

onclick ইভেন্টের বাস্তব উদাহরণ দেখতে CSS স্টাইলিং সহ আমি কিছু বেসিক HTML প্রস্তুত করেছি।

<div>
  <p class="name">freeCodeCamp</p>
  <button>Change to Blue</button>
</div>

এবং নিচে CSS অংশটুকু দেওয়া হলঃ

 body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
      }
p {
   font-size: 2rem;
}

button {
    padding: 7px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.blue {
    background-color: #3498db;
}

button.green {
    background-color: #2ecc71;
}

button.orange {
   background-color: orangered;
}

আমরা ওয়েব পেজে নিম্নোক্ত স্ক্রিনশটের মতো কিছু দেখবোঃ

changeColor

আমাদের লক্ষ্য হল আমরা যখন বাটনটিতে ক্লিক করবো তখন টেক্সটের রঙ পরিবর্তন হয়ে নীল হবে। সুতরাং আমাদের বাটনে একটি onclick অ্যাট্রিবিউট যুক্ত করতে হবে। তারপর রঙ পরিবর্তনের জন্য জাভাস্ক্রিপ্ট ফাংশনটি লিখতে হবে।

আমাদের HTML এ ছোট্ট কিছু পরিবর্তন করতে হবেঃ

<div>
  <p class="name">freeCodeCamp</p>
  <button onclick="changeColor()">Change to Blue</button>
</div>

আমাদের changeColor() ফাংশনটি এক্সিকিউট করতে হবে। সুতরাং আমাদের এই ফাংশনটি একটি জাভাস্ক্রিপ্ট ফাইলে লিখতে হবে বা HTML ফাইলের মধ্যে একোটি <script> ট্যাগের মধ্যে লিখতে হবে।

আপনি যদি আপনার স্ক্রিপ্টটি একোটি জাভাস্ক্রিপ্ট ফাইলে লিখতে চান তাহলে নিম্নোক্ত সিনট্যাক্স ব্যবহার করে ফাইলটি HTML এ লিংক করে দিতে হবে।

<script src="path-to-javascript-file"></script>

আপনি যদি স্ক্রিপ্টটি HTML ফাইলেই লিখতে চান তাহলে এটিকে script ট্যাগের ভেতরে দিয়ে দিনঃ

<script>
  // Your Scripts
</script>

এবার আমাদের changeColor() ফাংশনটি লেখা যাক।

প্রথমে, আমরা যে এলিমেন্টটিকে পরিবর্তন করতে চাই, এক্ষেত্রে <p> ট্যাগের ভেতরে থাকা freeCodeCamp টেক্সটিকে সিলেক্ট করতে হবে।

জাভাস্ক্রিপ্টে DOM এর getElementById(), getElementsByClassName(), অথবা querySelector() মেথডগুলি ব্যবহার করে এটি করা যায়। এরপর আপনাকে মানটি একটি ভ্যারিয়েবলে রাখতে হবে।

এই টিউটোরিয়ালে আমি querySelector() ব্যবহার করবো কারণ এটি আধুনিক এবং দ্রুত কাজ করে। ভ্যারিয়েবল ডিক্লেয়ার করার জন্য আমি let বা var এর বদলে const ব্যবহার করবো কারণ ভ্যারিয়েবলগুলি read-only হলে কোডে ভুল হওয়ার সম্ভাবনা কম থাকে।

const name = document.querySelector(".name");

এখন যেহেতু আমরা টেক্সটটি সিলেক্ট করেছি, চলুন ফাংশনটি লিখে ফেলি। জাভাস্ক্রিপ্টে, বেসিক ফাংশন সিনট্যাক্স নিম্নরূপঃ

function funcctionName () {
    // What to do
} 

ফাংশনের ভেতরের কোড নিম্নরূপঃ

function changeColor() {
    name.style.color = "blue";
}

কি হচ্ছে এই এক লাইনের কোডে?

মনে রাখতে হবে যে HTML থেকে আমরা যে ফাংশনটিকে এক্সিকিউট করবো সেটি হল changeColor()। এজন্য আমাদের ফাংশন আইডেন্টিফায়ার (নাম) হিসেবে changeColor সেট করা হয়েছে। HTML এ লেখা নামটি যদি ফাংশনের নামের সাথে না মিলে, তাহলে কাজ হবে না।

DOM (Document Object Model অর্থাৎ সম্পূর্ণ HTML ডকুমেন্টটি) এ যে কোন এলিমেন্টের স্টাইল পরিবর্তন করতে হলে প্রথমে "style" লিখতে হবে, তারপর একটি ডট (.)। এরপর লিখতে হবে আপনি কি পরিবর্তন করতে চান, যেমন color, background color, font size এবং আরও অনেক কিছু।

সুতরাং আমাদের ফাংশনের ভেতরে আমরা name ভ্যারিয়েবলটি ব্যবহার করে আমাদের freeCodeCamp টেক্সটটিকে পাই এবং এর রঙ পরিবর্তন করে নীল করে ফেলি।

বাটনটি যখন ক্লিক করা হবে তখনই আমাদের টেক্সটের রঙ নীল হয়ে যাবেঃ

changeColor

আমাদের কোডটি কাজ করছে!

আমরা চাইলে আমাদের টেক্সটের রঙ কে পরিবর্তন করে একাধিক রঙ দিতে পারিঃ

<div>
      <p class="name">freeCodeCamp</p>
      <button onclick="changeColor('blue')" class="blue">Blue</button>
      <button onclick="changeColor('green')" class="green">Green</button>
      <button onclick="changeColor('orangered')" class="orange">Orange</button>
</div>

এবার আমরা টেক্সট এর রঙ পরিবর্তন করে blue, green এবং orange-red করতে চাই।

আমাদের HTML এর onclick ফাংশনটি এখন আমরা টেক্সট এ যে রঙ দিতে চাই, সে রঙ এর নামটি নেয়। জাভাস্ক্রিপ্টে এগুলিকে বলা হয় প্যারামিটার। আমাদের ফাংশনেরও color নামে একটি  প্যারামিটার আছে।

আমাদের ওয়েব পেজেও কিছু পরিবর্তন এসেছেঃ

changeColors

আমাদের freeCodeCamp টেক্সট সিলেক্ট করে তার রঙ blue, green, এবং orange-red করার কোড নিম্নরূপঃ

const name = document.querySelector(".name");

function changeColor(color) {
   name.style.color = color;
}

HTML বাটনগুলির changeColor() ফাংশনগুলির ভেতরের কোড ব্লকটি color প্যারামিটারের মান হিসেবে দেওয়া রঙটিকে name ভ্যারিয়েবলের মাধ্যমে টেক্সট এর রঙ হিসেবে সেট করে দেয়।

changeColors

জাভাস্ক্রিপ্টে ক্লিক eventListener কিভাবে ব্যবহার করবেন

জাভাস্ক্রিপ্টে একটি কাজ করার একাধিক উপায় থাকে। জাভাস্ক্রিপটের বিবর্তনের সাথে সাথে HTML, CSS এবং জাভাস্ক্রিপ্ট কোডগুলিকে আলাদা করার প্রয়জনীয়তা দেখা দেয়।

ইভেন্ট লিসেনারগুলি এটিকে সম্ভব করে। আপনি onclick ব্যবহার করেও এটি করতে পারেন তবে এবার একটি আলাদা পদ্ধতি অবলম্বন করা যাক।

বেসিক eventListener সিনট্যাক্স

 element.addEventListener("type-of-event", functionToExecute)

এবার চলুন ক্লিক eventListener ব্যবহার করে freeCodeCamp টেক্সটের রঙ পরিবর্তন করি।

আমাদের নতুন HTML কোডটি নিম্নরূপঃ

 <div>
      <p class="name">freeCodeCamp</p>
      <button>Change Color</button>
 </div>

পেজটি দেখতে নিম্নরূপঃ

colorChange

এই পদ্ধতিতে আমাদের শুধু টেক্সটটি সিলেক্ট করলেই চলবে না, বাটনও সিলেক্ট করতে হবে। কারণ এবার বাটনের ওপেনিং ট্যাগে কোন জাভাস্ক্রিপ্ট কোড নেই।

আমাদের স্ক্রিপ্টের কোড নিম্নরূপঃ

const name = document.querySelector(".name");
const btn = document.querySelector("button");

      btn.addEventListener("click", function () {
        name.style.color = "blue";
 });

আমরা চাইলে আমাদের ফাংশনটি ইভেন্ট লিসেনার থেকে সম্পূর্ণ আলাদা করে ফেলতে পারি এবং এতে আমাদের বাটনের কাজে কোন তারতম্য ঘটবে নাঃ

btn.addEventListener("click", changeColor);
      function changeColor() {
        name.style.color = "blue";
}
changeColorWithEvents

জাভাস্ক্রিপ্টে দিয়ে কিভাবে একটি "Show More" এবং "Show Less" বাটন তৈরি করবেন

শেখার সবথেকে ভাল উপায় হল প্রোজেক্ট বানানো। তাই চলুন onclick এবং "click" eventListener সম্পর্কে আমরা যা শিখলাম সেগুল দিয়ে কিছু একটা তৈরি করি।

আপনি যখন কোন ব্লগ পড়তে যান, তখন আপনি প্রায়শই প্রথমে আর্টিকেলগুলির একটি সংক্ষিপ্ত রুপ দেখতে পান। এরপর আপনি "read more" বাটনে ক্লিক করলে আর্টিকেলের বাকি অংশ পড়তে পারেন। চলুন আমরা এই ফাংশনালিটিটি তৈরি করার চেষ্টা করে দেখি।

এই প্রোজেক্টে আমরা নিম্নোক্ত HTML কোড নিয়ে কাজ করবোঃ

<article id="content">
      <p>
        freeCodeCamp is one of the best platforms to learn how to code.
        freeCodeCamp has a detailed curriculum that will take you from zero to
        hero in web development, software engineering, machine learning, and
        more.
      </p>

      <p>
        freeCodeCamp also has a YouTube channel containing over 1000 videos on
        web development, software engineering, machine learning, data science,
        freelance web development, database administration, and pretty much
        anything related to tech. To get updates when videos are uploaded, you
        need to subscribe to the channel and turn on notifications. You can also
        follow freeCodeCamp on Twitter, where links to well written articles and
        videos are tweeted daily.
      </p>

      <p>
        Since no one has to pay to learn how to code on freeCodeCamp,
        freeCodeCamp runs on voluntary donations from donors all around the
        world in order to pay employees and maintain servers. If you are
        generous enough consider joining the donors.
      </p>
    </article>

<button onclick="showMore()">Show more</button>

এটি freeCodeCamp এর তথ্য সম্বলিত একটি খুবই সাধারণ HTML। এই কোডে একটি বাটন আছে যার মধ্যে ইতমধ্যেই onclick যুক্ত করা হয়েছে। এখানে আমরা যে ফাংশনটি এক্সিকিউট করতে চাই তার নাম showMore() এবং এই ফাংশনটি এখন আমরা লিখবো।

কোন CSS ছাড়া আমাদের পেজটি দেখতে নিম্নরূপঃ

articleunstyled

এটা দেখতে খুব একটা খারাপ না তবে আমরা এটিকে আরও সুন্দর করে আমাদের ইচ্ছে মতো কাজ করাতে পারি। এর জন্য প্রয়োজনীয় CSS কোডটি নিম্নরূপঃ

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background: #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      article {
        width: 400px;
        background: #fff;
        padding: 20px 20px 0;
        font-size: 18px;
        max-height: 270px;
        overflow: hidden;
        transition: max-height 1s;
        text-align: justify;
        margin-top: 20px;
      }

      p {
        margin-bottom: 16px;
      }

      article.open {
        max-height: 1000px;
      }

      button {
        background: #0e0b22;
        color: #fff;
        padding: 0.6rem;
        margin-top: 20px;
        border: none;
        border-radius: 4px;
      }

      button:hover {
        cursor: pointer;
        background: #1e1d25;
      }
</style>

এই CSS কোড কি করছে?

ইউনিভার্সাল সিলেক্টর (*) ব্যবহার করে আমরা সব এলিমেন্টের ডিফল্ট মার্জিন এবং প্যাডিং সরাচ্ছি যেন আমরা নিজস্ব মার্জিন এবং প্যাডিং যুক্ত করতে পারি।

বক্স সাইজিং এর মান হিসেবে আমরা border-box সেট করেছি যেন আমরা প্যাডিং এবং বর্ডারকে এলিমেন্টের মোট প্রস্থ এবং দৈর্ঘ্যের অংশ হিসেবে যুক্ত করতে পারি।

ফ্লেক্সবক্স ব্যবহার করে আমরা সবকিছুকে পেজের সেন্টারে এ নিয়ে এসেছি এবং ব্যাকগ্রাউন্ড কালার হিসেবে হাল্কা ধূসর (light grey) ব্যবহার করেছি।

আমাদের <arrticle> এলিমেন্ট যার মধ্যে আমাদের টেক্সটটি আছে তার প্রস্থ 400px, ব্যাকগ্রাউন্ড কালার সাদা (#fff)। এটির উপরে 20px, বামে ও ডানে 20px, এবং নিচে 0px প্যাডিং আছে।

ভেতরের প্যারাগ্রাফ ট্যাগের font-size 18px এবং maximum height 270px। টেক্সট যেন আর্টিকেল এলিমেন্টের বাহিরে চলে না যায় সেজন্য আমরা overflow এর মান হিসেবে hidden সেট করেছি।

কোডে transition প্রোপার্টি নিশ্চিত করে যেন যে কোন পরিবর্তন ১ সেকেন্ড পরে ঘটে। article এর ভেতরের সব টেক্সট justified এবং এদের উপরে 20px মার্জিন আছে যেন এগুলি পেজের উপরের দিকে বেশি সরে না যায়।

যেহেতু আমরা ডিফল্ট মার্জিন সরিয়ে ফেলেছি তাই আমাদের প্যারাগ্রাফগুলি একটি আরেকটির সাথে লেগে আছে। এগুলি কে আলাদা করার জন্য এগুলির নিচে 16px মার্জিন দেওয়া হয়েছে।

আমাদের article.open সিলেক্টরটির max-height প্রোপার্টির মান হিসেবে 1000px সেট করা হয়েছে। সুতরাং যখনই আমাদের আর্টিকেলে open ক্লাস যুক্ত হবে তখনই এর maximum height 270px থেকে পরিবর্তন হয়ে 1000px হয়ে যাবে। এতি জাভাস্ক্রিপ্টের মাধ্যমে করা সম্ভব।

আমরা আমাদের বাটনকে একটি ডার্ক ব্যাকগ্রাউন্ড দিয়েছি এবং বাটনটিকে সাদা করে ফেলেছি। আমরা এর বর্ডার হিসেবে none সেট করেছি যেন HTML এর ডিফল্ট বর্ডারটি না থাকে। বাটনটিকে 4px বর্ডার র‍্যাডিয়াস দেওয়া হয়েছে যেন এর বর্ডার কিছুটা গোলাকার হয়।

অবশেষে, বাটন কার্জরটিকে একটি পয়েন্টারে পরিবর্তন করতে আমরা hover pseudo-class টি ব্যবহার করা হয়েছে। বাটনের উপরে হোভার করা হলে এর রঙ কিছুটা বদলে যায়।

এখন আমাদের পেজটি দেখতে আগের থেকে বেশ সুন্দর হয়েছেঃ

articlestyled

এবার আমাদের জাভাস্ক্রিপ্ট কোড লিখতে হবে যেন আমরা আমাদের আর্টিকেলের বাকি অংশ দেখতে পারি।

আমাদের বাটনের ওপেনিং ট্যাগের ভেতরে একটি onclick অ্যাট্রিবিউট আছে যেটি showMore() ফাংশনটিকে এক্সিকিউট করবে। ফাংশনটি তাহলে লিখে ফেলা যাক।

আর্টিকেলের বাকি অংশ দেখানোর জন্য প্রথমে আমাদের আর্টিকেলটি সিলেক্ট করতে হবেঃ

const article = document.querySelector("#content");

showMore() ফাংশনের কোড নিম্নরূপঃ

function showMore() {
     if (article.className == "open") {
       // read less
       article.className = "";
       button.innerHTML = "Show more";
     } else {
       //read more
       article.className = "open";
       button.innerHTML = "Show less";
     }
  }

এই ফাংশনটি কি করছে?

এখানে আমরা একটি if...else স্টেটমেন্ট ব্যবহার করেছি। এটি জাভাস্ক্রিপ্টের খুবই গুরুত্বপূর্ণ একটি অংশ যা আপনাকে কোন শর্তের উপর ভিত্তি করে কোড চালাতে সহায়তা করে।

এর বেসিক সিনট্যাক্সটি নিম্নরূপঃ

if (condition == "something") {
  // Do something
} else {
  // Do something else
}

এখানে যদি আর্টিকেলের ক্লাস এর নাম open হয়, তাহলে আমরা আর্টিকেলের বাকি অংশ দেখতে চাই। নাহলে আমরা আর্টিকেলটিকে তার আগের অবস্থায় ফেরত পাঠাতে চাই।

else ব্লকের মধ্যে আর্টিকেলটিকে একটি open ক্লাস দিয়ে আমরা এই কাজটি করতে পারি এবং if ব্লকে আমরা ক্লাস হিসেবে একটি ফাঁকা স্ট্রিং সেট করতে পারি।

আমাদের কোডটি বেশ ভালই কাজ করছেঃ

article

আমরা HTML এবং জাভাস্ক্রিপ্ট কে আলাদা করে ফেলার পরেও জাভাস্ক্রিপ্ট ব্যবহার করতে পারবো কারণ onclick হল জাভাস্ক্রিপ্ট। তাই আমরা আমাদের জাভাস্ক্রিপ্ট কোডটিকে HTML এ না লিখে একটি আলাদা ফাইলেও লিখতে পারি।

 button.onclick = function () {
     if (article.className == "open") {
       // read less
       article.className = "";
       button.innerHTML = "Show more";
     } else {
       //read more
       article.className = "open";
       button.innerHTML = "Show less";
     }
  };
articleonclick

eventListener ব্যবহার করেও আমরা এই কাজটি করতে পারিঃ

<article id="content">
      <p>
        freeCodeCamp is one of the best platforms to learn how to code.
        freeCodeCamp has a detailed curriculum that will take you from zero to
        hero in web development, software engineering, machine learning, and
        many more.
      </p>

      <p>
        freeCodeCamp also has a YouTube channel containing over 1000 videos on
        web development, software engineering, machine learning, data science,
        freelance web development, database administration, and pretty more
        anything related to tech. To get updates when videos are uploaded, you
        need to subscribe to the channel and turn on notifications. You can also
        follow freeCodeCamp on Twitter, where links to well written articles and
        videos are tweeted daily.
      </p>

      <p>
        Since no one has to pay to learn how to code on freeCodeCamp,
        freeCodeCamp runs on voluntary donations from donors all around the
        world in order to pay employees and maintain servers. If you are
        generous enough consider joining the donors.
      </p>
</article>

<button id="read-more">Show more</button>
const article = document.querySelector("#content");
 const button = document.querySelector("#read-more");

button.addEventListener("click", readMore);

function readMore() {
     if (article.className == "open") {
       // Read less
     article.className = "";
     button.innerHTML = "Show more";
   } else {
     article.className = "open";
     button.innerHTML = "Show less";
   }
}

বাটনের কার্যকারিতা অপরিবর্তিত থাকবে।

উপসংহার

আমি আশা করি জাভাস্ক্রিপ্টে ক্লিক ইভেন্টের কাজ বুঝতে এই আর্টিকেলটি আপনাকে সহায়তা করেছে। আমরা এখানে দুটি পদ্ধতি শিখেছি যা আপনি আপনার কোডিং প্রোজেক্টগুলিতে ব্যবহার করতে পারেন।

পড়ার জন্য ধন্যবাদ, কোডিং চালিয়ে যান।