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 жадвал берилган. Ҳар қандай ҳужайра босилганда, унда инпут пайдо бўлиши ва ушбу ҳужайра матнини таҳрирлаш имкони бўлишини таъминланг.