Edycja pojedynczego elementu w JavaScript

Teraz nauczymy się edytować teksty elementów za pomocą pól wprowadzania. Zacznijmy od prostych rzeczy i stopniowo zwiększajmy złożoność.

A więc, załóżmy, że mamy dany akapit i pole input, umieszczone w tym samym rodzicu:

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

Zróbmy tak, aby po utracie fokusu w polu input jego tekst pojawiał się w akapicie:

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

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

Zróbmy teraz tak, aby po wejściu na stronę w polu input już był tekst akapitu. W ten sposób za pomocą pola input będziemy mogli edytować tekst znajdujący się w akapicie.

Zaimplementujmy:

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

input.value = elem.textContent; // zapisujemy w polu input tekst akapitu

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

Zmodyfikuj powyższy kod tak, aby tekst akapitu zmieniał się nie po utracie fokusu, lecz w miarę wprowadzania tekstu w polu input.

Pojawienie się pola input

Zróbmy teraz tak, aby pola input początkowo nie było na stronie, a pojawiało się po kliknięciu w akapit. Czyli nasz początkowy HTML będzie wyglądał tak:

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

Na początek po prostu zaimplementujmy pojawienie się pola input, bez edycji:

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

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

A teraz zróbmy tak, aby po utracie fokusu w polu input zmieniał się tekst akapitu:

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

Nasz kod jednak jest niedoskonały, ponieważ każde kliknięcie w akapit będzie prowadzić do pojawienia się nowego pola input.

Aby rozwiązać problem, po prostu po utracie fokusu usuwajmy bieżące pole 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(); // usuwamy pole input
	});
	
	elem.parentElement.appendChild(input);
});

Samodzielnie, nie podglądając w mój kod, rozwiąż opisane zadanie.