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