JavaScript'te Grup Öğelerinde Düzenleme

Şimdi bir değil, birçok paragrafımız olduğunu varsayalım:

<p>metin1</p>
<p>metin2</p>
<p>metin3</p>

Herhangi bir paragrafa tıklandığında, içinde düzenleme yapmak için bir input kutusu görünmesini sağlayalım.

Aslında böyle bir görev bizim için zor değil, çünkü neredeyse tüm kod bir önceki derste elde edilmişti.

Görevimizi çözmek için paragraflar üzerinde bir döngü başlatalım ve döngüde önceki dersin kodunu kullanalım (bu kodu değiştirmeye bile gerek kalmayacak):

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 etiketi verilsin. Herhangi bir li öğesine tıklandığında, içinde o li öğesinin metnini düzenleyebileceğiniz bir input kutusunun görünmesini sağlayın.

Bir HTML tablosu verilsin. Herhangi bir hücreye tıklandığında, o hücrenin metnini düzenlemek için bir input kutusunun görünmesini sağlayın.