JavaScript'te Grup Öğelerinde Düzenleme

Şimdi bir değil, birçok paragrafımız olduğunu varsayalım:

html<p>metin1</p>
<p>metin2</p>
<p>metin3</p>

Herhangi bir paragrafa tıklandığında, içinde düzenleme yapmak için bir input kutusu görünmesini sağlayalım.

Aslında böyle bir görev bizim için zor değil, çünkü neredeyse tüm kod bir önceki derste elde edilmişti.

Görevimizi çözmek için paragraflar üzerinde bir döngü başlatalım ve döngüde önceki dersin kodunu kullanalım (bu kodu değiştirmeye bile gerek kalmayacak):

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