Bewerken van een afzonderlijk element in JavaScript

Nu leren we hoe we teksten van elementen kunnen bewerken met behulp van invoervelden. We beginnen met eenvoudige dingen en gaan geleidelijk complexer worden.

Laten we aannemen dat we een alinea en een invoerveld hebben, geplaatst in dezelfde ouder:

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

Laten we ervoor zorgen dat wanneer het invoerveld zijn focus verliest, de tekst ervan in de alinea verschijnt:

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

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

Laten we nu ervoor zorgen dat wanneer de pagina wordt geladen, de tekst van de alinea al in het invoerveld staat. Op deze manier kunnen we met behulp van het invoerveld de tekst in de alinea bewerken.

Laten we dit implementeren:

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

input.value = elem.textContent; // schrijf de alineatekst naar het invoerveld

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

Pas de bovenstaande code aan zodat de tekst van de alinea niet verandert bij focusverlies, maar tijdens het invoeren van tekst in het invoerveld.

Verschijnen van invoerveld

Laten we nu ervoor zorgen dat het invoerveld initieel niet op de pagina staat, maar verschijnt bij een klik op de alinea. Dat betekent dat onze initiële HTML er als volgt uitziet:

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

Laten we eerst simpelweg het verschijnen van het invoerveld implementeren, zonder bewerkingsfunctionaliteit:

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

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

Laten we nu ervoor zorgen dat wanneer het invoerveld zijn focus verliest, de tekst van de alinea verandert:

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

Onze code is echter niet perfect, omdat elke klik op de alinea zal leiden tot het verschijnen van een nieuw invoerveld.

Om het probleem op te lossen, zullen we simpelweg het huidige invoerveld verwijderen bij focusverlies:

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(); // verwijder het invoerveld
	});
	
	elem.parentElement.appendChild(input);
});

Los de beschreven taak zelfstandig op, zonder in mijn code te spieken.