Úprava jednotlivého prvku v JavaScripte

Teraz sa naučíme upravovať texty prvkov pomocou vstupných polí. Začneme s jednoduchými vecami a budeme postupne komplikovať.

Takže, predpokladajme, že máme daný odsek a vstupné pole, umiestnené v jednom rodičovi:

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

Urobme tak, aby pri strate fokusu vo vstupnom poli sa jeho text objavil v odseku:

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

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

Teraz urobme tak, aby pri načítaní stránky už vo vstupnom poli bol text odseku. Týmto spôsobom budeme môcť pomocou vstupného poľa upravovať text umiestnený v odseku.

Realizujme:

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

input.value = elem.textContent; // zapíšeme do vstupného poľa text odseku

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

Upravte vyššie uvedený kód tak, aby text odseku sa menil nie pri strate fokusu, ale počas zadávania textu do vstupného poľa.

Objavenie sa vstupného poľa

Teraz urobme tak, aby vstupné pole spočiatku nebolo na stránke, ale objavilo sa po kliknutí na odsek. To znamená, že náš počiatočný HTML bude vyzerať takto:

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

Na začiatok jednoducho realizujme objavenie sa vstupného poľa, bez úpravy:

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

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

A teraz urobme tak, aby pri strate fokusu vo vstupnom poli sa zmenil text odseku:

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 nie je dokonalý, pretože každé kliknutie na odsek povedie k objaveniu sa nového vstupného poľa.

Na vyriešenie problému jednoducho pri strate fokusu odstránime aktuálne 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(); // odstránime vstupné pole
	});
	
	elem.parentElement.appendChild(input);
});

Samostatne, bez nahliadnutia do môjho kódu, vyriešte popísanú úlohu.