Уредување на посебен елемент во JavaScript

Сега ќе научиме како да ги уредуваме текстовите на елементите со помош на полиња за внесување. Ќе започнеме со едноставни работи и постепено ќе ги комплицираме.

Значи, нека ни се дадени параграф и input, поставени во еден родител:

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

Ајде да направиме така што при губење на фокусот во input-от, неговиот текст да се појавува во параграфот:

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

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

Сега ајде да направиме така што при влегување на страницата, во input-от веќе да стои текстот на параграфот. На овој начин, со помош на input-от, ќе можеме да го уредуваме текстот лоциран во параграфот.

Да го имплементираме:

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

input.value = elem.textContent; // го запишуваме во input-от текстот на параграфот

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

Модифицирајте го горенаведениот код така што текстот на параграфот да се менува не при губење на фокусот, туку при внесување на текст во input-от.

Појавување на input

Сега ајде да направиме така што input-от првично да не е на страницата, туку да се појавува при клик на параграфот. Односно, нашиот почетен HTML ќе изгледа вака:

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

За почеток, едноставно да го имплементираме појавувањето на input-от, без уредување:

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

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

А сега ајде да направиме така што при губење на фокусот во 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;
	});
	
	elem.parentElement.appendChild(input);
});

Сепак, нашиот код не е совршен, бидејќи секое кликнување на параграфот ќе доведе до појавување на нов input.

За решавање на проблемот, едноставно при губење на фокусот ќе го отстраниме тековниот 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(); // го отстрануваме input-от
	});
	
	elem.parentElement.appendChild(input);
});

Самостојно, без да го гледате мојот код, решете ја опишаната задача.