Map কালেকশনের প্রয়োগ

ধরা যাক আমাদের কাছে কিছু প্যারাগ্রাফ আছে:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

আসুন আমরা এমন ব্যবস্থা করি যাতে প্রতিটি প্যারাগ্রাফে ক্লিক করলে প্যারাগ্রাফের তালিকায় তার ক্রমিক নম্বরটি এর শেষে লেখা হয়। এই সমস্যাটি Map ব্যবহার করে সমাধান করা যাক।

শুরু করা যাক। প্রথমে আমাদের প্যারাগ্রাফগুলো একটি ভেরিয়েবলে নেওয়া যাক:

let elems = document.querySelectorAll('p');

একটি নতুন Map কালেকশন তৈরি করা যাক:

let map = new Map;

আমাদের কালেকশনটি এমনভাবে পূরণ করা যাক যাতে কীগুলি হল আমাদের প্যারাগ্রাফ, এবং তাদের মানগুলি হবে তাদের ক্রমিক নম্বর:

let i = 1;
for (let elem of elems) {
	map.set(elem, i++);
}

লুপ ব্যবহার করে প্যারাগ্রাফগুলোতে ঘুরে আসি এবং তাদের উপর ক্লিক হ্যান্ডলার যোগ করি:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

এবার ক্লিক করলে প্যারাগ্রাফের টেক্সটের শেষে ক্রমিক নম্বর যোগ করা যাক। এটি করার সময় আমরা আমাদের কালেকশন থেকে এই নম্বরটি পাব:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.textContent += map.get(this);
	});
}

কিছু ইনপুট দেওয়া আছে। লুপ ব্যবহার করে এই ইনপুটগুলোতে ঘুরে আসুন এবং একটি Map কালেকশন তৈরি করুন, যার কীগুলি হলো ইনপুটগুলি, এবং তাদের মান হবে পৃষ্ঠায় তাদের ক্রমিক নম্বর। এমন ব্যবস্থা করুন, যে কোনো ইনপুটে ক্লিক করলে তার value-এ তার ক্রমিক নম্বর লেখা হয়।

কিছু ইনপুট দেওয়া আছে। প্রতিটি ইনপুটে একটি সংখ্যা 입력 করা যায়। Enter চাপলে ইনপুটটি লিখিত সংখ্যাটি মনে রাখবে। এমন ব্যবস্থা করুন, যাতে ইনপুটটি ফোকাস হারালে কনসোলে ইনপুটে পূর্বে প্রবেশ করানো সকল সংখ্যার অ্যারে প্রিন্ট হয়।