Chỉnh sửa trong nhóm phần tử bằng JavaScript

Bây giờ giả sử chúng ta không có một đoạn văn, mà có nhiều đoạn văn:

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

Hãy làm sao để khi nhấp vào bất kỳ đoạn văn nào, một ô nhập liệu sẽ xuất hiện trong đó để chỉnh sửa.

Trên thực tế, nhiệm vụ này không phức tạp đối với chúng ta, vì gần như toàn bộ mã đã được chúng ta có từ bài học trước.

Để giải quyết nhiệm vụ của chúng ta, chỉ cần chạy một vòng lặp qua các đoạn văn và trong vòng lặp sử dụng mã của bài học trước (mã này thậm chí không cần phải thay đổi):

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

Cho trước thẻ ul. Hãy làm sao để khi nhấp vào bất kỳ li nào, một ô nhập liệu sẽ xuất hiện trong đó, với sự trợ giúp của ô nhập liệu này bạn có thể chỉnh sửa văn bản của li đó.

Cho trước bảng HTML. Hãy làm sao để khi nhấp vào bất kỳ ô nào, một ô nhập liệu để chỉnh sửa văn bản của ô đó xuất hiện.