Lấy các phần tử DOM không trùng lặp

Giả sử chúng ta có các đoạn văn và một nút bấm:

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>

<button>click me</button>

Giả sử người dùng nhấp vào các đoạn văn này theo thứ tự tùy ý. Hãy làm sao để khi nhấn vào nút bấm, cuối mỗi đoạn văn đã được nhấp vào sẽ được thêm dấu chấm than. Hãy giải quyết bài toán bằng Set.

Hãy bắt đầu. Trước tiên, lấy các phần tử của chúng ta vào các biến:

let button = document.querySelector('button');
let elems  = document.querySelectorAll('p');

Hãy tạo một bộ sưu tập Set mới:

let set = new Set;

Duyệt qua các đoạn văn bằng vòng lặp và gắn bộ xử lý sự kiện nhấp chuột cho chúng:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		
	});
}

Bây giờ hãy thêm đoạn văn đó vào bộ sưu tập mỗi khi nhấp vào một đoạn văn:

for (let elem of elems) {
	elem.addEventListener('click', function() {
		set.add(this);
	});
}

Do chúng ta sử dụng bộ sưu tập Set nên việc nhấp lại vào cùng một đoạn văn sẽ không dẫn đến việc thêm một bản sao trùng lặp của đoạn văn đó.

Bây giờ hãy làm sao để khi nhấp vào nút bấm, chúng ta duyệt qua nội dung bộ sưu tập của mình và thêm dấu chấm than vào cuối mỗi đoạn văn:

button.addEventListener('click', function() {
	for (let elem of set) {
		elem.textContent = elem.textContent + '!';
	}
});

Cho các đoạn văn và một nút bấm. Người dùng nhấp vào các đoạn văn này theo thứ tự tùy ý. Hãy làm sao để khi nhấn vào nút bấm, cuối mỗi đoạn văn đã được nhấp vào sẽ được thêm dấu chấm than.