Redigering af individuelle elementer i JavaScript

Nu vil vi lære at redigere tekster elementer ved hjælp af inputfelter. Lad os starte med enkle ting og gradvist gøre det mere komplekst.

Så lad os sige, at vi har et afsnit og et input, placeret i samme forælder:

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

Lad os gøre det sådan, at når inputfeltet mister fokus, vises dets tekst i afsnittet:

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

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

Lad os nu gøre det sådan, at når siden indlæses, står afsnittets tekst allerede i inputfeltet. På denne måde kan vi ved hjælp af inputfeltet redigere teksten placeret i afsnittet.

Lad os implementere:

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

input.value = elem.textContent; // skriv afsnittets tekst til inputfeltet

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

Modificer ovenstående kode, så afsnittets tekst ændres ikke ved tab af fokus, men efterhånden som tekst indtastes i inputfeltet.

Inputfeltets fremtoning

Lad os nu gøre det sådan, at inputfeltet initialt ikke er på siden, men det vises ved klik på afsnittet. Det vil sige, vores start- HTML vil se sådan ud:

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

Lad os først bare implementere visning af inputfeltet, uden redigering:

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

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

Og lad os nu gøre det sådan, at når inputfeltet mister fokus, ændres afsnittets tekst:

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

Vores kode er dog ikke perfekt, da hvert klik på afsnittet vil føre til fremtoning af et nyt inputfelt.

For at løse problemet, lad os simpelthen, når inputfeltet mister fokus, fjerne det aktuelle inputfelt:

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(); // fjern inputfeltet
	});
	
	elem.parentElement.appendChild(input);
});

Løs den beskrevne opgave selvstændigt, uden at kigge i min kode.