JavaScript တွင် အစုအဝေးရှိ အရာများကို တည်းဖြတ်ခြင်း

ယခု ကျွန်ုပ်တို့တွင် စာပိုဒ်တစ်ပိုဒ်တည်းမဟုတ်ဘဲ အများအပြားရှိသည်ဆိုပါစို့။

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

မည်သည့် စာပိုဒ်ကိုမဆို ကလစ်နှိပ်လိုက်သည်နှင့် ၎င်းအတွင်း တည်းဖြတ်ရန် input ပေါ်လာစေရန် ပြုလုပ်ကြပါစို့။

တကယ်တော့ ဤလုပ်ဆောင်ချက်သည် ကျွန်ုပ်တို့အတွက် ခက်ခဲသည်မဟုတ်ပါ။ အဘယ်ကြောင့်ဆိုသော် ကုဒ်အားလုံးနီးပါးကို ယခင်သင်ခန်းစာမှ ရရှိထားပြီးဖြစ်သောကြောင့်ဖြစ်သည်။

ကျွန်ုပ်တို့၏ လုပ်ဆောင်ချက်ကို ဖြေရှင်းရန် စာပိုဒ်များအားလုံးအတွက် ကွင်းဆက်တစ်ခု လည်ပတ်ပြီး ကွင်းဆက်အတွင်း ယခင်သင်ခန်းစာမှ ကုဒ်ကို အသုံးပြုပါမည် (ဤကုဒ်ကို ပြောင်းလဲရန် လိုအပ်မည်မဟုတ်ပါ)။

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