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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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