JavaScript에서 그룹 요소 편집

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

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

어떤 단락을 클릭해도 편집을 위한 입력 필드가 나타나도록 해 봅시다.

사실 이 작업은 이전 수업에서 거의 모든 코드를 얻었기 때문에 우리에게 어렵지 않습니다.

우리의 문제를 해결하기 위해 단락에 대한 루프를 실행하고 루프에서 이전 수업의 코드를 사용하면 됩니다 (이 코드를 변경할 필요조차 없습니다):

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