জাভাস্ক্রিপ্টে গ্রুপ এলিমেন্ট এডিটিং

এখন ধরুন আমাদের কাছে একটি নয়, অনেকগুলি প্যারাগ্রাফ রয়েছে:

html<p>text1</p>
<p>text2</p>
<p>text3</p>

আসুন আমরা এমন করি যে কোনো প্যারাগ্রাফে ক্লিক করলে সেখানে এডিট করার জন্য একটি ইনপুট উপস্থিত হয়।

আসলে এই কাজটি আমাদের জন্য কোনো জটিলতা উপস্থাপন করে না, কারণ প্রায় সমস্ত কোড আমরা আগের পাঠে পেয়েছিলাম।

আমাদের কাজ সমাধান করার জন্য, শুধু প্যারাগ্রাফগুলির উপর একটি লুপ চালানো যাক এবং লুপের মধ্যে আগের পাঠের কোডটি ব্যবহার করি (এই কোডটিও পরিবর্তন করার প্রয়োজন হবে না):

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

for (let elem of elems) {
  elem.addEventListener('click', function func() {
    let input = document.createElement('input');
    input.value = elem.textContent;
    
    elem.textContent = '';
    elem.appendChild(input);
    
    input.addEventListener('blur', function() {
      elem.textContent = this.value;
      elem.addEventListener('click', func);
    });
    
    elem.removeEventListener('click', func);
  });
}