जावास्क्रिप्ट में DOM एलिमेंट्स को एडिट करने वाले फंक्शन की डुप्लीकेशन एरर

मान लीजिए कि हमारे पास एक सूची है:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

सूची और उसके आइटम्स को अलग-अलग वेरिएबल्स में प्राप्त करते हैं:

let ul    = document.querySelector('ul');
let lis   = document.querySelectorAll('li');

आइए ऐसा करें कि हमारी सूची के आइटम्स को एक इनपुट के द्वारा एडिट किया जा सके जो क्लिक करने पर दिखाई दे:

for (let li of lis) {
	li.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = list.textContent;
		
		li.textContent = '';
		li.append(input);
		
		input.addEventListener('blur', function() {
			li.textContent = this.value;
			li.addEventListener('click', func);
		});
		
		li.removeEventListener('click', func);
	});
}

अब मान लीजिए कि हम चाहते हैं कि सूची में नए आइटम्स जोड़े जा सकें। इसके लिए, सूची के नीचे एक इनपुट होगा:

<input id="adder">

इस इनपुट का रेफरेंस एक वेरिएबल में प्राप्त करते हैं:

let adder = document.querySelector('#adder');

आइए ऐसा करें कि जब इनपुट का फोकस खत्म हो, तो सूची में एक नया आइटम जोड़ा जाए, जिसका टेक्स्ट इनपुट के वैल्यू से लिया गया हो:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	ul.append(li);
});

अब मान लीजिए कि हम चाहते हैं कि नए जोड़े गए आइटम्स भी एडिट किए जा सकें। अपने आप में, उनके लिए एडिटिंग काम नहीं करेगी, क्योंकि जब हमने सूची के आइटम्स पर क्लिक हैंडलर लगाया था, तब ये आइटम्स मौजूद नहीं थे।

आइए इस समस्या के संभावित समाधानों पर एक नजर डालते हैं।

पहला समाधान

सबसे सरल समाधान है फंक्शन func के कोड को डुप्लीकेट करना, इसे नए बनाए गए आइटम्स के लिए भी बांधना:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	li.addEventListener('click', function func() {
		// यहाँ हम कोड को डुप्लीकेट कर रहे हैं
	});
	
	ul.append(li);
});

बेशक, इस समाधान में हमें तुरंत एक कमी दिखाई देती है - कोड को डुप्लीकेट करना सही नहीं है।

दूसरा समाधान

डुप्लीकेशन की समस्या को हल करने के लिए, फंक्शन func को बाहर निकालकर इसे Function Declaration बनाना तार्किक है:

function func() {
	let input = document.createElement('input');
	input.value = list.textContent;
	
	li.textContent = '';
	li.append(input);
	
	input.addEventListener('blur', function() {
		li.textContent = this.value;
		li.addEventListener('click', func);
	});
	
	li.removeEventListener('click', func);
}

यहीं हमें एक समस्या का सामना करना पड़ता है। बात यह है कि हमारे फंक्शन ने वेरिएबल li का उपयोग किया था, जो बाहरी स्कोप से प्राप्त की गई थी। लेकिन फंक्शन को बाहर निकालने के बाद, अब यह वेरिएबल दिखाई नहीं दे रही है!

समस्या को हल करने के लिए, हम अपनी li को पैरामीटर के रूप में पास करेंगे:

function func(li) {
	let input = document.createElement('input');
	input.value = list.textContent;
	
	li.textContent = '';
	li.append(input);
	
	input.addEventListener('blur', function() {
		li.textContent = this.value;
		li.addEventListener('click', func);
	});
	
	li.removeEventListener('click', func);
}

और यहाँ हमारा समाधान एक और समस्या पैदा करता है। बात यह है कि इवेंट हैंडलर में पैरामीटर को ऐसे ही पास नहीं किया जा सकता:

for (let li in lis) {
	li.addEventListener('click', func(li)); // काम नहीं करता!
}

इस समस्या के समाधान के लिए, बस एक अनामिक हैंडलर के अंदर हमारे फंक्शन को कॉल करें:

for (let li of lis) {
	li.addEventListener('click', function() {
		func(li);
	});
}

और इसी तरह से नई सूची आइटम बनाते समय भी करेंगे:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	li.addEventListener('click', function() {
		func(li);
	});
	
	ul.append(li);
});

तीसरा समाधान

एक और सुरुचिपूर्ण समाधान मौजूद है। बस डेलीगेशन का उपयोग कर सकते हैं। इस मामले में नए सूची आइटम्स की समस्या बिल्कुल भी नहीं उठेगी:

ul.addEventListener('click', function(event) {
	if (event.target.tagName === 'LI') { // हम स्पष्ट रूप से li पर क्लिक पकड़ रहे हैं, इनपुट पर नहीं
		let li = event.target;
		
		let input = document.createElement('input');
		input.value = li.textContent;
		
		li.textContent = '';
		li.append(input);
		
		input.addEventListener('blur', function() {
			li.textContent = this.value;
		});
	}
});

इस मामले में सूची आइटम्स का लूप भी हमें आवश्यक नहीं होगा, और नए सूची आइटम बनाने का कोड इस तरह सिमट जाएगा:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	ul.append(li);
});