Yksittäisen elementin muokkaus JavaScriptillä

Nyt opimme muokkaamaan elementtien tekstejä syöttökenttien avulla. Aloitamme yksinkertaisista asioista ja monimutkaistamme vähitellen.

Oletetaan, että meillä on kappale ja syöttökenttä, jotka sijaitsevat samassa vanhemmassaelementissä:

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

Tehdään niin, että kun syöttökenttä menettää fokuksensa, sen teksti ilmestyy kappaleeseen:

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

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

Tehdään nyt niin, että kun sivu avataan, syöttökentässä on jo kappaleen teksti. Tällä tavalla voimme syöttökentän avulla muokata kappaleessa olevaa tekstiä.

Toteutetaan:

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

input.value = elem.textContent; // kirjoitetaan syöttökenttään kappaleen teksti

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

Muokkaa yllä olevaa koodia niin, että kappaleen teksti muuttuu ei fokuksen menetyksen yhteydessä, vaan syöttökentän tekstin kirjoittamisen myötä.

Syöttökentän ilmestyminen

Tehdään nyt niin, että syöttökenttää ei aluksi ole sivulla, vaan se ilmestyy klikatessa kappaletta. Alkuperäinen HTML näyttää tältä:

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

Aluksi toteutetaan vain syöttökentän ilmestyminen, ilman muokkausta:

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

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

Tehdään nyt niin, että kun syöttökenttä menettää fokuksensa, kappaleen teksti muuttuu:

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

Koodimme ei kuitenkaan ole täydellinen, koska jokainen kappaleen klikkaus johtaa uuden syöttökentän ilmestymiseen.

Ratkaistaksesi ongelman, poistetaan nykyinen syöttökenttä fokuksen menetyksen yhteydessä:

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(); // poistetaan syöttökenttä
	});
	
	elem.parentElement.appendChild(input);
});

Ratkaise itsenäisesti, katsomatta koodiini, kuvattu tehtävä.