ভ্যানিলা জাভাস্ক্রিপ্ট সহ একটি উপাদানে ক্লিকের সংখ্যা কীভাবে গণনা করবেন

একটি উপাদানে ক্লিকের পরিমাণ গণনা করা জাভাস্ক্রিপ্টের সাথে আপনি করতে পারেন এমন সবচেয়ে সহজ জিনিসগুলির মধ্যে একটি। আপনাকে যা করতে হবে তা হল আপনার ক্লিকগুলি সঞ্চয় করার জন্য একটি ভেরিয়েবল ঘোষণা করা এবং তারপরে আপনার লক্ষ্য উপাদানে addEventListener পদ্ধতিটি ব্যবহার করা।

ধরা যাক আপনি একটি বোতাম উপাদানে ক্লিকের সংখ্যা ট্র্যাক করতে চান, যেমন একটি হোম বোতাম।

HTML মার্কআপ

একটি HTML বোতাম উপাদান তৈরি করুন এবং এটিকে বাটন-হোম-এর একটি শ্রেণি দিন:

<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 ঘোষণা করি ভেরিয়েবল আমাদের ভবিষ্যতের ক্লিক সংরক্ষণ করতে. আমরা এটিকে 0 এর একটি ডিফল্ট প্রাথমিক মান দিই।
• তারপর আমরা addEventListener() ব্যবহার করে আমাদের বোতামহোমের সাথে একটি ইভেন্ট লিসেনার সংযুক্ত করি পদ্ধতি।
• আমাদের ইভেন্ট শ্রোতার ভিতরে আমরা উল্লেখ করি যে আমরা 'click' শুনছি ঘটনা এবং যে আমরা একটি function() চালাতে চাই প্রতিটি ক্লিক ইভেন্টে।
• আমাদের ফাংশনের ভিতরে, আমরা নির্দিষ্ট করি যে আমাদের CountButtonHomeClicks-এ 1 যোগ করতে চাই পরিবর্তনশীল প্রতিবার ক্লিক ইভেন্ট ট্রিগার হয়। 1 যোগ করতে, আমরা += ব্যবহার করি (প্লাস সমান) অপারেটর।
• অবশেষে, আমরা console.log() ব্যবহার করে প্রতিটি ক্লিক ইভেন্ট লগ করি আমাদের CountButtonHomeClicks-এ পরিবর্তনশীল।

এখন আপনি জানেন কিভাবে একটি নির্দিষ্ট উপাদানে ক্লিক গণনা করতে হয়।

জেনে রাখা ভালো:

• উপরের কোডটি ES6 সিনট্যাক্স ব্যবহার করছে। আপনি যদি ES5 ব্যবহার করেন, তাহলে শুধু let প্রতিস্থাপন করুন var সহ এবং এটি একই কাজ করবে।
• এই উদাহরণে আমরা যে ফাংশন টাইপ ব্যবহার করি তাকে বলা হয় বেনামী ফাংশন কারণ এর কোনো নাম নেই — ফাংশন এক্সপ্রেশন এর বিপরীতে এবং ফাংশন ঘোষণা।
• বেনামী ফাংশন পুনরায় ব্যবহার করা যাবে না। আপনি যদি একাধিক ইভেন্টে একই ফাংশনকে কল করতে চান তবে একটি ফাংশন এক্সপ্রেশন বা ফাংশন ঘোষণা ব্যবহার করুন।

কোড পান

এখানে উপরের সমস্ত কোড সহ একটি কোডপেন রয়েছে।