JavaScript에서 그룹 요소 편집

이제 단락이 하나가 아니라 여러 개 있다고 가정해 보겠습니다:

<p>text1</p>
<p>text2</p>
<p>text3</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 테이블이 주어졌습니다. 어떤 셀을 클릭해도 해당 셀의 텍스트를 편집하기 위한 입력 필드가 나타나도록 만드세요.