JavaScript-те элементтер тобында өңдеу

Енді бір абзац емес, көп болсын делік:

<p>мәтін1</p>
<p>мәтін2</p>
<p>мәтін3</p>

Кез келген абзацты басқанда, онда өңдеу үшін енгізу өрісі пайда болатындай етейік.

Шындығында, мұндай мәселе біз үшін қиындық тудырмайды, өйткені бұрынғы сабақтан кодтың көп бөлігін алған болатынбыз.

Мәселемізді шешу үшін абзацтар бойынша цикл жүргізіп, цикл ішінде алдыңғы сабақтың кодын қолданайық (бұл кодты тіпті өзгертудің қажеті жоқ):

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 тегі берілген. Кез келген li-ны басқанда, онда осы li-ның мәтінін өңдеуге болатын енгізу өрісі пайда болатындай етіңіз.

HTML кестесі берілген. Кез келген ұяшықты басқанда, онда сол ұяшықтың мәтінін өңдеу үшін енгізу өрісі пайда болатындай етіңіз.