Uhariri wa Vikundi vya Vipengee kwa kutumia JavaScript

Sasa tuseme tuna aya nyingi badala ya moja:

<p>maandishi1</p>
<p>maandishi2</p>
<p>maandishi3</p>

Wacha tufanye ili kwa kubofya kwa aya yoyote kiingilio cha uhariri kionekane ndani yake.

Kwa kweli, changamoto hii haikuwi ngumu kwetu kwa sababu karibu msimbo wote tulipata katika somo lililopita.

Ili kutatua changamoto yetu, tuendeshe tu mzunguko kupitia aya zote na katika mzunguko tumia msimbo wa somo lililopita (huu msimbo huitaji hata kubadilishwa):

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

Kuna kitambulisho ul. Fanya ili kwa kubofya kwa li yoyote kiingilio kionekane ndani yake, ambacho kitaweza kutumika kuhariri maandishi ya li hiyo.

Kuna jedwali la HTML. Fanya ili kwa kubofya kwa kiini chochote kiingilio kiaonekane ndani yake kwa ajili ya kuhariri maandishi ya kiini hicho.