การแก้ไขในกลุ่มองค์ประกอบด้วย 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 จงทำให้เมื่อ คลิกที่เซลล์ใด ๆ ในนั้นจะปรากฏอินพุต สำหรับแก้ไขข้อความของเซลล์นั้น