• Теория
  • Теория

Добавляем обработчик с помощью цикла

Мы использовали цикл for of, чтобы вывести в консоль все элементы коллекции. Таким же образом мы можем добавить обработчик кликов всем кнопкам в новости. Воспользуемся циклом: на каждой итерации будем добавлять обработчик элементу, который сейчас находится в переменной цикла. В результате мы получим универсальный скрипт — обработчик добавится каждому элементу в коллекции, сколько бы их ни было.

Например:

let elements = document.querySelectorAll('p');

for (let element of elements) {
  // Добавляем обработчик всем элементам по очереди
  element.onclick = function () {
    console.log('Вы кликнули на абзац!');
  };
}

Когда цикл из примера выполнится, обработчики добавятся всем абзацам в коллекции elements, и при клике на каждый из них будет выводиться сообщение в консоль.

Обработчик событий, благодаря которому показываются подсказки на новостном сайте, уже написан. Перенесём его внутрь цикла и заменим обращение по индексу на переменную tooltipButton, которую мы используем в цикле.

// До:
tooltipButtons[0].onclick = function () {
  ...
};

// После:
for (let tooltipButton of tooltipButtons) {
  tooltipButton.onclick = function () {
    ...
  };
}

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

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Коллекции и свойства элементов» тренажёра «Знакомство с JavaScript» можно после регистрации и оформления подписки.