JavaScript-de elementler toparlarynda redaktirlemek

Indi bir abzas däl-de, köp abzaslarymyz bar diýeliň:

<p>tekst1</p>
<p>tekst2</p>
<p>tekst3</p>

Geliň, haýsy bir abzasa basylsa-da, onuň içinde redaktirlemek üçin input peýda bolýan etdik.

Aslynda bu meselä biz üçin kyn däl, sebäbi öňki sapakda koduň köp bölegini aldymyz.

Meselemizi çözmek üçin diňe abzaslar boýunça aýlaw (loop) işledip, aýlawda öňki sapagyň koduny ulanarys (bu kody üýtgetmek hem gerek bolmaz):

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = elem.textContent;
		
		elem.textContent = '';
		elem.appendChild(input);
		
		input.addEventListener('blur', function() {
			elem.textContent = this.value;
			elem.addEventListener('click', func);
		});
		
		elem.removeEventListener('click', func);
	});
}

ul teg berlen. Haýsy bir li basylsa-da, onuň içinde şol li-niň tekstini redaktirläp boljak input peýda boljak etdiriň.

HTML tablisasy berlen. Haýsy bir öýjige basylsa-da, onuň içinde şol öýjügiň tekstini redaktirlemek üçin input peýda boljak etdiriň.