От автора code.mu: РЕПЕТИТОР математика физика информатика
Для школьников и студентов. Подтягивание пробелов. ЦЭ, ЦТ, ОГЭ, ЕГЭ.
Идет набор на ЛЕТО. Жмите для подробностей:)
⊗jsSpStGWD 43 of 294 menu

Получение 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 + '!'; } });

Даны абзацы и кнопка. Пользователь кликает на эти абзацы в произвольном порядке. Сделайте так, чтобы по нажатию на кнопку в конец каждого абзаца, на который был совершен клик, был добавлен восклицательный знак.

Русский
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Мы используем cookie для работы сайта, аналитики и персонализации. Обработка данных происходит согласно Политике конфиденциальности.
принять все настроить отклонить