जावास्क्रिप्ट में अलग-अलग एलिमेंट को एडिट करना

अब हम इनपुट फ़ील्ड की मदद से एलिमेंट के टेक्स्ट को एडिट करना सीखेंगे। हम सरल चीज़ों से शुरू करेंगे और धीरे-धीरे जटिल बनाते जाएंगे।

तो, मान लीजिए कि हमारे पास एक पैराग्राफ और एक इनपुट है, जो एक ही पैरेंट में स्थित हैं:

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

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

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

आइए अब ऐसा करें कि पेज पर आते ही इनपुट में पैराग्राफ का टेक्स्ट पहले से ही मौजूद हो। इस तरह हम इनपुट की मदद से पैराग्राफ में मौजूद टेक्स्ट को एडिट कर सकेंगे।

इसे लागू करते हैं:

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // इनपुट में पैराग्राफ का टेक्स्ट लिखें

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

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

इनपुट का दिखना

आइए अब ऐसा करें कि शुरू में पेज पर कोई इनपुट न हो, बल्कि वह पैराग्राफ पर क्लिक करने पर दिखाई दे। यानी हमारा शुरुआती HTML ऐसा दिखेगा:

<div id="parent">
	<p id="elem">text</p>
</div>

शुरुआत में सिर्फ इनपुट के दिखने को लागू करते हैं, बिना एडिटिंग के:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.parentElement.appendChild(input);
});

और अब आइए ऐसा करें कि इनपुट में फोकस खोने पर पैराग्राफ का टेक्स्ट बदल जाए:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
	});
	
	elem.parentElement.appendChild(input);
});

हालाँकि, हमारा कोड परफेक्ट नहीं है, क्योंकि पैराग्राफ पर हर बार क्लिक करने से एक नया इनपुट दिखाई देगा।

समस्या के समाधान के लिए, फोकस खोने पर मौजूदा इनपुट को हटा देंगे:

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

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // इनपुट हटाएं
	});
	
	elem.parentElement.appendChild(input);
});

खुद से, मेरे कोड में न देखे, बताई गई समस्या का समाधान करें।