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

Выводим текст подсказки на страницу

Мы познакомились с data-атрибутами и вывели в консоль значение атрибута data-tooltip-text обеих кнопок. Этот атрибут нам нужен, чтобы показать правильную подсказку. Если пользователь нажал на первую кнопку, то внутри попапа должен появиться текст из атрибута первой кнопки, а если на вторую — то второй.

Выводить текст будем в элементе с классом tooltip-text. В разметке он находится внутри попапа:

<div class="tooltip">
  <span class="tooltip-text"></span>
  <button class="button close-button" type="button">
    <span>Закрыть</span>
  </button>
</div>

Найдём этот элемент, сохраним в переменную и будем изменять его текстовое содержимое. Внутри первого обработчика событий используем текст из атрибута первой кнопки, а внутри второго — второй. Кликнем на обе кнопки и проверим, что в попапе выводится правильный текст подсказки.

В этот момент Кекс пробежал по клавиатуре (наверное, куда-то торопился и решил срезать), и из файла пропали все выводы в консоль.

Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс по JavaScript первого уровня, проходящий c 18 июня по 19 августа 2024. Только 5 дней цена 28 900 ₽30 900 ₽

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

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

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

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

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

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