Üksiku elemendi muutmine JavaScriptis

Nüüd õpime muutma elementide tekste sisestusväljade abil. Alustame lihtsatest asjadest ja muudame järjest keerukamaks.

Oletame, et meil on antud lõik ja sisestusväli, mis asuvad samas vanemaelemendis:

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

Teeme nii, et kui sisestusväli kaotab fookuse, ilmub selle tekst lõigus:

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

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

Teeme nüüd nii, et lehele sisenedes on sisestusväljas juba lõigu tekst. Nii saame sisestusvälja abil muuta lõigus olevat teksti.

Rakendame:

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

input.value = elem.textContent; // kirjutame sisestusväljale lõigu teksti

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

Muutke ülaltoodud koodi nii, et lõigu teksti muutub mitte fookuse kaotamisel, vaid vastavalt sisestusväljale teksti sisestamisele.

Sisestusvälja ilmumine

Teeme nüüd nii, et sisestusvälja algselt lehel ei ole, vaid see ilmub lõigule klõpsates. See tähendab, et meie algne HTML näeb välja selline:

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

Alustuseks lihtsalt rakendame sisestusvälja ilmumise, ilma muutmiseta:

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

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

Ja teeme nüüd nii, et kui sisestusväli kaotab fookuse, muudetakse lõigu teksti:

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

Meie kood pole siiski täiuslik, sest iga lõigule klõpsamine toob kaasa uue sisestusvälja ilmumise.

Probleemi lahendamiseks eemaldame lihtsalt fookuse kaotamisel jooksva sisestusvälja:

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(); // eemaldame sisestusvälja
	});
	
	elem.parentElement.appendChild(input);
});

Lahendage kirjeldatud ülesanne iseseisvalt, ilma minu koodi peale vaatamata.