Gắn trình xử lý sự kiện trong vòng lặp bằng JavaScript

Trong bài học trước, chúng ta đã học cách tạo các phần tử mới trong vòng lặp. Bây giờ hãy gắn các trình xử lý sự kiện khi tạo các phần tử mới.

Giả sử chúng ta lại có một div cha như sau:

<div id="parent"></div>

Hãy chạy một vòng lặp sẽ thêm 9 đoạn văn mới vào cuối div của chúng ta, đồng thời gắn một trình xử lý sự kiện click vào chúng:

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let p = document.createElement('p');
	p.textContent = '!';
	
	// Gắn trình xử lý sự kiện click:
	p.addEventListener('click', function() {
		console.log(this.textContent);
	});
	
	parent.appendChild(p);
}

Cho một div. Hãy chạy một vòng lặp để thêm 5 ô nhập liệu (input) vào div của chúng ta. Giả sử cũng có một đoạn văn. Hãy thực hiện sao cho mỗi ô nhập liệu mới khi mất tiêu điểm sẽ ghi văn bản của nó vào đoạn văn.