Urejanje posameznega elementa v JavaScript

Zdaj se bomo naučili urejati besedila elementov z vnosnimi polji. Začnimo z preprostimi stvarmi in postopoma zapletajmo.

Torej, imamo podan odstavek in vnosno polje, nameščena v istem starševskem elementu:

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

Naredimo tako, da se ob izgubi fokusa v vnosnem polju njegovo besedilo prikaže v odstavku:

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

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

Zdaj pa naredimo tako, da ob obisku strani v vnosnem polju že stoji besedilo odstavka. Tako bomo lahko z vnosnim poljem uredili besedilo, ki se nahaja v odstavku.

Izvedimo:

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

input.value = elem.textContent; // zapišemo v vnosno polje besedilo odstavka

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

Spremenite zgornjo kodo tako, da se besedilo odstavka spreminja ne ob izgubi fokusa, ampak med vnosom besedila v vnosno polje.

Pojavitev vnosnega polja

Zdaj pa naredimo tako, da vnosnega polja sprva ni na strani, ampak se prikaže ob kliku na odstavek. To pomeni, da bo naš začetni HTML videti takole:

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

Za začetek preprosto izvedimo pojavitev vnosnega polja, brez urejanja:

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

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

Zdaj pa naredimo tako, da se ob izgubi fokusa v vnosnem polju spremeni besedilo odstavka:

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

Vendar naša koda ni popolna, saj bo vsak klik na odstavek povzročil pojavitev novega vnosnega polja.

Za rešitev problema bomo preprosto ob izgubi fokusa izbrisali trenutno vnosno 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(); // izbrišemo vnosno polje
	});
	
	elem.parentElement.appendChild(input);
});

Samostojno, brez vpogleda v mojo kodo, rešite opisano nalogo.