Pengeditan dalam Kumpulan Elemen pada JavaScript

Sekarang andaikan kita mempunyai bukan satu perenggan, tetapi banyak:

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

Mari kita buat supaya apabila klik pada mana-mana perenggan, input untuk pengeditan akan muncul di dalamnya.

Sebenarnya tugas sedemikian tidak sukar bagi kita, kerana hampir semua kod telah kita peroleh dalam pelajaran sebelumnya.

Untuk menyelesaikan tugas kita, kita hanya akan jalankan gelung melalui semua perenggan dan dalam gelung gunakan kod dari pelajaran sebelumnya (kod 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);
	});
}

Diberi tag ul. Buat supaya apabila klik pada mana-mana li, input akan muncul di dalamnya, yang boleh digunakan untuk mengedit teks li tersebut.

Diberi jadual HTML. Buat supaya apabila klik pada mana-mana sel, input untuk mengedit teks sel tersebut muncul di dalamnya.