Уређивање појединачног елемента у 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);
});

Самостално, без погледа у мој код, решите описани задатак.