Рэдагаванне асобнага элемента на JavaScript

Цяпер мы з вамі навучымся рэдагаваць тэксты элементаў з дапамогай палёў уводу. Пачнем з простых рэчаў і будзем паступова ўскладняць.

Такім чынам, хай у нас дадзены абзац і інпут, размешчаныя ў адным бацьку:

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

Давайце зробім так, каб па страце фокуса ў інпуце яго тэкст з'яўляўся ў абзацы:

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

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

Давайце цяпер зробім так, каб па заходзе на старонку ў інпуце ўжо стаяў тэкст абзаца. Такім чынам мы з дапамогай інпута зможам рэдагаваць тэкст, размешчаны ў абзацы.

Рэалізуем:

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

input.value = elem.textContent; // запісваем у інпут тэкст абзаца

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

Мадыфікуйце прыведзены вышэй код так, каб тэкст абзаца мяняўся не па страце фокуса, а па меры ўводу тэксту ў інпут.

З'яўленне інпута

Давайце цяпер зробім так, каб інпута першапачаткова не было на старонцы, а ён з'яўляўся па кліку на абзац. Гэта значыць наш пачатковы HTML будзе выглядаць так:

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

Для пачатку проста рэалізуем з'яўленне інпута, без рэдагавання:

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

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

А цяпер давайце зробім так, каб па страці фокуса ў інпуце мяняўся тэкст абзаца:

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

Наш код, аднак, недасканалы, так як кожнае націсканне на абзац будзе прыводзіць да з'яўлення новага інпута.

Для вырашэння праблемы проста будзем па страці фокуса выдаляць бягучы інпут:

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(); // выдалім інпут
	});
	
	elem.parentElement.appendChild(input);
});

Самастойна, не падглядваючы ў мой код, вырашыце апісаную задачу.