Edit dalam Grup Elemen di JavaScript

Sekarang misalkan kita tidak memiliki satu paragraf, tetapi banyak:

<p>teks1</p>
<p>teks2</p>
<p>teks3</p>

Mari kita buat agar ketika diklik pada sembarang paragraf, muncul input untuk mengedit di dalamnya.

Sebenarnya tugas seperti ini tidak merepresentasikan kesulitan bagi kita, karena hampir semua kode telah kita dapatkan dalam pelajaran sebelumnya.

Untuk menyelesaikan tugas kita, cukup jalankan loop melalui semua paragraf dan dalam loop gunakan kode dari pelajaran sebelumnya (kode ini bahkan tidak perlu diubah):

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

Diberikan tag ul. Buat agar saat diklik pada sembarang li, muncul input di dalamnya, yang dapat digunakan untuk mengedit teks dari li tersebut.

Diberikan tabel HTML. Buat agar saat diklik pada sembarang sel, muncul input untuk mengedit teks sel tersebut.