JavaScript аркылуу жеке элементти оңдоо

Азыр биз элементтердин текстин киргизүү талааларынын жардамы менен оңдоону үйрөнөбүз. Жөнөкөй нерселерден баштап, акырындагы кыйындатабыз.

Ошентип, бизде бир ата-энеде жайгашкан абзац жана input болсун:

<div id="parent">
	<p id="elem">текст</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">текст</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);
});

Өз алдынча, менин кодумга карабастан, сүрөттөлгөн маселени чечиңиз.