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

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

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

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

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

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

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

ul tag ကို ပေးထားသည်။ မည်သည့် li ကိုမဆို ကလစ်နှိပ်လိုက်သည်နှင့် ၎င်း၏ text ကို တည်းဖြတ်နိုင်မည့် input တစ်ခု ပေါ်လာစေရန် ပြုလုပ်ပါ။

HTML ဇယားတစ်ခု ပေးထားသည်။ မည်သည့် ဆဲလ်ကိုမဆို ကလစ်နှိပ်လိုက်သည်နှင့် ၎င်းဆဲလ်၏ text ကို တည်းဖြတ်နိုင်မည့် input တစ်ခု ပေါ်လာစေရန် ပြုလုပ်ပါ။