Получение DOM элементов без дублей
Пусть у нас есть абзацы и кнопка:
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>
<button>click me</button>
Пусть пользователь кликает на эти абзацы
в произвольном порядке. Давайте сделаем так,
чтобы по нажатию на кнопку в конец каждого
абзаца, на который был совершен клик, был
добавлен восклицательный знак. Решим задачу
через Set
.
Приступим. Для начала получим наши элементы в переменные:
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
Создадим новую коллекцию Set
:
let set = new Set;
Переберем абзацы циклом и повесим на них обработчик клика:
for (let elem of elems) {
elem.addEventListener('click', function() {
});
}
Давайте теперь по клику на абзац будем добавлять этот абзац в коллекцию:
for (let elem of elems) {
elem.addEventListener('click', function() {
set.add(this);
});
}
Из-за того, что мы используем коллекцию Set
повторный клик на абзац не будет приводить
к добавлению дубля абзаца.
Давайте теперь по клику на кнопку переберем содержимое нашей коллекции и каждому абзацу в конец добавим восклицательный знак:
button.addEventListener('click', function() {
for (let elem of set) {
elem.textContent = elem.textContent + '!';
}
});
Даны абзацы и кнопка. Пользователь кликает на эти абзацы в произвольном порядке. Сделайте так, чтобы по нажатию на кнопку в конец каждого абзаца, на который был совершен клик, был добавлен восклицательный знак.