ডুপ্লিকেট ছাড়া DOM এলিমেন্ট পাওয়া

ধরি আমাদের কাছে কিছু অনুচ্ছেদ এবং একটি বাটন আছে:

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

<button>click me</button>

ব্যবহারকারী যেকোনো ক্রমে এই অনুচ্ছেদগুলিতে ক্লিক করুক। চলুন এমনভাবে করি যাতে বাটনে ক্লিক করলে প্রতিটি অনুচ্ছেদের শেষে, যেগুলিতে ক্লিক করা হয়েছে, একটি বিস্ময়বোধক চিহ্ন যোগ হয়। এটি Set এর মাধ্যমে সমাধান করি।

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

javascriptlet button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

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

javascriptlet set = new Set;

একটি লুপ দিয়ে অনুচ্ছেদগুলো নিয়ে যাই এবং তাদের উপর ক্লিক হ্যান্ডলার বসাই:

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

এখন চলুন ক্লিক করলে সেই অনুচ্ছেদটি কালেকশনে যোগ করি:

javascriptfor (let elem of elems) {
  elem.addEventListener('click', function() {
    set.add(this);
  });
}

আমরা Set কালেকশন ব্যবহার করছি বলে একই অনুচ্ছেদে পুনরায় ক্লিক করলে অনুচ্ছেদের ডুপ্লিকেট যোগ হবে না।

এখন চলুন বাটনে ক্লিক করলে আমাদের কালেকশনের বিষয়বস্তু নিয়ে যাই এবং প্রতিটি অনুচ্ছেদের শেষে একটি বিস্ময়বোধক চিহ্ন যোগ করি:

javascriptbutton.addEventListener('click', function() {
  for (let elem of set) {
    elem.textContent = elem.textContent + '!';
  }
});