การแก้ไขในกลุ่มองค์ประกอบด้วย 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);
  });
}