Uređivanje pojedinačnog elementa u JavaScriptu

Sada ćemo naučiti kako da uređujemo tekstove elemenata pomoću polja za unos. Počećemo od prostih stvari i postepeno ćemo usložnjavati.

Dakle, pretpostavimo da imamo pasus i input, smešteni u istom roditeljskom elementu:

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

Učinimo da po gubitku fokusa u input polju, njegov tekst bude prenesen u pasus:

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

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

Sada učinimo da se pri učitavanju stranice u input polju već nalazi tekst iz pasusa. Na taj način ćemo pomoću input polja moći da uređujemo tekst koji se nalazi u pasusu.

Implementirajmo:

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

input.value = elem.textContent; // upisujemo u input tekst pasusa

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

Modifikujte gornji kod tako da se tekst pasusa menja ne po gubitku fokusa, već tokom unosa teksta u input polje.

Pojavljivanje input polja

Sada učinimo da input polje u početku ne postoji na stranici, već da se pojavi pri kliku na pasus. To znači da će naš početni HTML izgledati ovako:

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

Za početak jednostavno implementirajmo pojavljivanje input polja, bez mogućnosti uređivanja:

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

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

A sada učinimo da se pri gubitku fokusa u input polju menja tekst pasusa:

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

Međutim, naš kod nije savršen, jer će svaki klik na pasus dovesti do pojavljivanja novog input polja.

Da bismo rešili problem, jednostavno ćemo pri gubitku fokusa ukloniti trenutno input polje:

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

Samostalno, ne zagledajući se u moj kod, rešite opisan problem.