JavaScript-də ayrı bir elementin redaktə edilməsi

İndi biz elementlərin mətnlərini daxil etmə sahələri vasitəsilə redaktə etməyi öyrənəcəyik. Sadə şeylərdən başlayaraq tədricən mürəkkəbləşdirəcəyik.

Beləliklə, fərz edək ki, bizə eyni valideyn içərisində yerləşən abzas və input verilib:

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

Gəlin elə edək ki, inputda fokus itirildikdə onun mətni abzasda görünsün:

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

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

İndi gəlin elə edək ki, səhifəyə daxil olan kimi inputda artıq abzasın mətni olsun. Beləliklə, biz input vasitəsilə abzasda yerləşən mətni redaktə edə biləcəyik.

Reallaşdıraq:

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

input.value = elem.textContent; // inputa abzasın mətnini yazırıq

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

Yuxarıdakı kodu elə dəyişin ki, abzasın mətni fokus itirildikdə deyil, inputa mətn daxil edildikcə dəyişsin.

Inputun peyda olması

İndi gəlin elə edək ki, input ilkin olaraq səhifədə olmasın, o, abzasa kliklənildikdə peyda olsun. Yəni bizim ilkin HTML belə görünəcək:

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

Başlamaq üçün sadəcə inputun peyda olmasını reallaşdıraq, redaktə etmədən:

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

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

İndi gəlin elə edək ki, inputda fokus itirildikdə abzasın mətni dəyişsin:

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

Lakin bizim kodumuz mükəmməl deyil, çünki hər dəfə abzasa kliklənildikdə yeni input peyda olacaq.

Problemi həll etmək üçün fokus itirildikdə cari inputu silək:

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 silirik
	});
	
	elem.parentElement.appendChild(input);
});

Müstəqil olaraq, mənim koduma baxmadan, təsvir olunan məsələni həll edin.