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

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

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

आइए ऐसा करें कि किसी भी पैराग्राफ पर क्लिक करने पर संपादन के लिए उसमें एक इनपुट दिखाई दे।

वास्तव में, यह कार्य हमारे लिए कोई कठिनाई पेश नहीं करता है, क्योंकि लगभग सारा कोड हमें पिछले पाठ में मिल गया था।

हमारे कार्य को हल करने के लिए, बस पैराग्राफ्स पर एक लूप चलाएं और लूप में पिछले पाठ के कोड का उपयोग करें (इस कोड को बदलने की भी आवश्यकता नहीं होगी):

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

एक ul टैग दिया गया है। ऐसा करें कि किसी भी li पर क्लिक करने पर उसमें एक इनपुट दिखाई दे, जिसकी सहायता से उस li के टेक्स्ट को संपादित किया जा सके।

एक HTML टेबल दी गई है। ऐसा करें कि किसी भी सेल पर क्लिक करने पर उस सेल के टेक्स्ट को संपादित करने के लिए एक इनपुट दिखाई दे।