একটি এলিমেন্টে ক্লিকের সংখ্যা গণনা করা জাভাস্ক্রিপ্ট দিয়ে করা সবচেয়ে সহজ কাজগুলোর একটি। আপনার কাজ হচ্ছে একটি ভেরিয়েবল ঘোষণা করা ক্লিক সংরক্ষণের জন্য এবং আপনার টার্গেট এলিমেন্টে addEventListener মেথড ব্যবহার করা।
মান লিন আপনি একটি বাটন এলিমেন্টে ক্লিকের সংখ্যা ট্র্যাক করতে চান, যেমন একটি হোম বাটন।
HTML মার্কআপ
একটি HTML বাটন এলিমেন্ট তৈরি করুন এবং এটিকে button-home ক্লাস দিন:
<button class="button-home">Home</button>জাভাস্ক্রিপ্ট
নিচের কোডটি আপনার জাভাস্ক্রিপ্ট ফাইলে যোগ করুন (নিচে কোড ব্যাখ্যা করা আছে):
let buttonHome = document.querySelector(".button-home") let CountButtonHomeClicks = 0 buttonHome.addEventListener("click", function() { CountButtonHomeClicks += 1 console.log(CountButtonHomeClicks) })ফলাফল:
উপরের বাটন এলিমেন্টে কিছু CSS স্টাইলিং যোগ করা হয়েছে যাতে এটি সহজে ক্লিক করা যায়।
জাভাস্ক্রিপ্ট কোডে কী হচ্ছে:
- প্রথমে, আমরা
querySelector()মেথড ব্যবহার করে বাটন এলিমেন্টেরbutton-homeক্লাসটি সিলেক্ট করি। তারপর এটিকেbuttonHomeভেরিয়েবলে এসাইন করি। - তারপর আমরা
CountButtonHomeClicksভেরিয়েবল ঘোষণা করি ভবিষ্যতের ক্লিকগুলো সংরক্ষণের জন্য। এটিকে ০ এর ডিফল্ট ইনিশিয়াল মান দিই। - তারপর
addEventListener()মেথড ব্যবহার করে আমাদের buttonHome-এ একটি ইভেন্ট লিসেনার যুক্ত করি। - আমাদের ইভেন্ট লিসেনারের ভিতরে আমরা নির্দিষ্ট করি যে আমরা
'click'ইভেন্টের জন্য শুনছি এবং প্রতিটি ক্লিক ইভেন্টে একটিfunction()এক্সিকিউট করতে চাই। - আমাদের ফাংশনের ভিতরে, আমরা নির্দিষ্ট করি যে প্রতিবার ক্লিক ইভেন্ট ট্রিগার হলে আমাদের
CountButtonHomeClicksভেরিয়েবলে ১ যোগ করতে চাই। ১ যোগ করার জন্য আমরা+=(প্লাস ইকুয়ালস) অপারেটর ব্যবহার করি। - শেষে, আমরা
console.log()ব্যবহার করে আমাদেরCountButtonHomeClicksভেরিয়েবলের প্রতিটি ক্লিক ইভেন্ট লগ করি।
এখন আপনি জানেন কীভাবে একটি নির্দিষ্ট এলিমেন্টে ক্লিক গণনা করতে হয়।
জানা ভালো:
- উপরোক্ত কোড ES6 সিনট্যাক্স ব্যবহার করছে। আপনি যদি ES5 ব্যবহার করেন, তবে
let-কেvar- দিয়ে রিপ্লেস করুন এবং এটি একইভাবে কাজ করবে। - এই উদাহরণে আমরা যে ফাংশন টাইপ ব্যবহার করেছি তা অনামাস ফাংশন कहলো কials নয় — ফাংশন এক্সপ্রেশন এবং ফাংশন ডিক্লেয়ারেশন-এর মত।
- অনামাস ফাংশনগুলো পুনরায় ব্যবহার করা যায় না। আপনি যদি একই ফাংশনকে বিভিন্ন ইভেন্টে কল করতে চান, তবে ফাংশন এক্সপ্রেশন বা ফাংশন ডিক্লেয়ারেশন ব্যবহার করুন।
উপরোক্ত সকল কোডসহ একটি CodePen এখানে দেওয়া আছে।
