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

Добавляем обработчики обеим кнопкам

Мы научились обращаться к элементам коллекции по индексу. Чтобы подсказки заработали, нужно добавить словам-кнопкам в коллекции tooltipButtons обработчики кликов.

Стажёр, который занимался подсказками до нас, нашёл первую кнопку и добавил обработчик только ей:

tooltipButton.onclick = function () {
  tooltip.classList.add('opened');
};

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

tooltipButtons[0].onclick = function () {
  tooltip.classList.add('opened');
};

tooltipButtons[1].onclick = function () {
  tooltip.classList.add('opened');
};

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

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

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

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

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

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

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