Editace jednotlivých prvků v JavaScriptu

Nyní se naučíme upravovat texty prvků pomocí vstupních polí. Začneme jednoduchými věcmi a postupně budeme komplikovat.

Předpokládejme, že máme odstavec a vstupní pole, umístěné v jednom rodičovském prvku:

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

Udělejme to tak, aby po ztrátě fokusu ve vstupním poli se jeho text objevil v odstavci:

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

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

Nyní udělejme to, aby při načtení stránky již ve vstupním poli byl text odstavce. Tímto způsobem budeme moci pomocí vstupního pole upravovat text umístěný v odstavci.

Implementujme:

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

input.value = elem.textContent; // zapíšeme do vstupního pole text odstavce

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

Upravte výše uvedený kód tak, aby text odstavce se měnil ne při ztrátě fokusu, ale během zadávání textu do vstupního pole.

Objevení se vstupního pole

Nyní udělejme to, aby vstupní pole zpočátku nebylo na stránce, ale objevilo se při kliknutí na odstavec. To znamená, že naše počáteční HTML bude vypadat takto:

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

Nejprve jednoduše implementujme objevení se vstupního pole, bez editace:

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

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

A nyní udělejme to, aby při ztrátě fokusu ve vstupním poli se změnil text odstavce:

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

Náš kód však není dokonalý, protože každé kliknutí na odstavec povede k objevení se nového vstupního pole.

Pro vyřešení problému jednoduše při ztrátě fokusu odstraníme aktuální vstupní pole:

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(); // odstraníme vstupní pole
	});
	
	elem.parentElement.appendChild(input);
});

Samostatně, bez nahlížení do mého kódu, vyřešte popsaný problém.