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