জাভাস্ক্রিপ্টে পৃথক উপাদান সম্পাদনা

এখন আমরা ইনপুট ক্ষেত্র ব্যবহার করে উপাদানের পাঠ্য সম্পাদনা করতে শিখব। আমরা সহজ জিনিস দিয়ে শুরু করব এবং ধীরে ধীরে জটিলতা বাড়াব।

সুতরাং, আমাদের কাছে একটি অনুচ্ছেদ এবং একটি ইনপুট দেওয়া আছে, যা একটি অভিভাবকের মধ্যে অবস্থিত:

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