जावास्क्रिप्ट में तत्वों के समूह में संपादन

अब मान लीजिए कि हमारे पास एक पैराग्राफ नहीं बल्कि कई हैं:

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);
  });
}