Мы подключили наш скрипт к другой новости, в которой оказалось четыре кнопки. Мы кликнули на них, но сработали только первые две, ведь обработчики мы добавили только им. Как быть? Неужели придётся создавать отдельный скрипт для каждой новости и копировать обработчики? Конечно, нет. Используем цикл.

Цикл — это конструкция, которая позволяет выполнить код несколько раз. В JavaScript существуют разные циклы, мы познакомимся с ними в следующих частях. Для нашей же задачи используем цикл for of:

for (переменная of коллекция) {
  // Код, который нужно выполнить несколько раз
}

Цикл for of выполнит код из фигурных скобок столько раз, сколько элементов содержится в коллекции, указанной в круглых скобках. Каждое такое повторение называется итерацией.

При создании цикла в круглых скобках также нужно указать переменную. Обычно для этого объявляют новую переменную и используют её только внутри цикла. На каждой итерации JavaScript будет автоматически записывать в эту переменную очередной элемент коллекции.

Рассмотрим пример:

let elements = document.querySelectorAll('p'); // Находим все абзацы

for (let element of elements) {  // Создаём цикл и переменную
  console.log(element);          // Выводим элементы в консоль
}

Если в коллекции elements два элемента, то JavaScript выполнит следующие инструкции:

// Первая итерация:
// В переменную автоматически записывается первый элемент коллекции
element = elements[0];
// Выполняется код из цикла – первый элемент коллекции выводится в консоль
console.log(element);

// Вторая итерация:
// В переменную автоматически записывается второй элемент коллекции
element = elements[1];
// Повторяется код из цикла, но теперь в консоль выводится второй элемент
console.log(element);

Цикл завершится, когда в коллекции закончатся элементы. После этого JavaScript перейдёт к инструкциям, которые идут после цикла.

Благодаря циклу нам не нужно заранее знать количество элементов в коллекции и копировать обработчики. Это позволяет сделать скрипт универсальным, а код — короче и понятнее.

Проверим, как это работает: создадим цикл и скажем JavaScript вывести в консоль все элементы коллекции tooltipButtons.