JavaScript'te Tekil Öğe Düzenleme

Şimdi, giriş alanları kullanarak öğelerin metinlerini düzenlemeyi öğreneceğiz. Basit şeylerle başlayacağız ve yavaş yavaş karmaşık hale getireceğiz.

Öyleyse, aynı ebeveynde bulunan bir paragraf ve bir input verildiğini varsayalım:

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

Input odağını kaybettiğinde, metninin paragrafta görünmesini sağlayalım:

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Şimdi, sayfa yüklendiğinde inputta zaten paragrafın metninin bulunmasını sağlayalım. Böylece input kullanarak paragrafta bulunan metni düzenleyebileceğiz.

Uygulayalım:

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // inputa paragraf metnini yaz

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

Yukarıdaki kodu, paragraf metninin input odağı kaybolduğunda değil, inputa metin girilirken değişmesi için değiştirin.

Input'un Görünmesi

Şimdi, başlangıçta sayfada input olmamasını, ancak paragrafa tıklandığında görünmesini sağlayalım. Yani başlangıç HTML'miz şöyle görünecek:

<div id="parent">
	<p id="elem">text</p>
</div>

Önce sadece düzenleme olmadan inputun görünmesini sağlayalım:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.parentElement.appendChild(input);
});

Şimdi, input odağı kaybettiğinde paragrafın metninin değişmesini sağlayalım:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
	});
	
	elem.parentElement.appendChild(input);
});

Ancak kodumuz mükemmel değil, çünkü paragrafa her tıklama yeni bir inputun görünmesine neden olacak.

Sorunu çözmek için, sadece oda kaybedildiğinde mevcut inputu silelim:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // inputu kaldır
	});
	
	elem.parentElement.appendChild(input);
});

Koduma bakmadan, kendi başınıza açıklanan görevi çözün.