Уређивање у групи елемената у JavaScript-у

Нека сада имамо не један пасус, већ више:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Хајде да направимо да кликом на било који пасус у њему се појави input поље за уређивање.

Заправо, такав задатак за нас не представља тешкоћу, пошто је готово цео код добијен у претходној лекцији.

За решење нашег задатка ћемо једноставно покренути петљу кroz пасусе и у петљи користити код претходне лекције (овај код чак неће требати мењати):

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 у њој се појави input поље, помоћу ког се може изменити текст те li.

Дата је HTML табела. Направите тако да при клику на било ћелију у њој се појави input поље за уређивање текста те ћелије.