- Теория
- Теория
Добавляем обработчик с помощью цикла
Мы использовали цикл 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
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.