@lagudal

Как грамонтее скрыть сообщение после таймаута?

Задача такая, допустим, есть кнопка, по клику на которую создается оповещение на странице, и в класс "message" добавляется новый див с аттрибутом. (role="alert").
Нужно через несколько секунд, например, через 5, скрыть содержимое этого дива и таким образом скрыть это оповещение. При повторном нажатии цикл повторяется.
Задача в принципе простая, сложность для меня в том, что в данном случае нужно сделать на ванильном js и без привязки к событию onclick кнопки.
Простейшая конструкция внизу работает, но на деле у меня нет доступа к обработке события onclick кнопки, т.е. тут кнопка и ее обработка показана для наглядности, а по сути надо как то отлавливать это вне функции.
Думал, ослеживать содержимое дива, и если оно не пустое, то скрывать его через 5 секунд. Однако так срабатывает только один раз, и при повторном оповещении оно уже не скрывается.
Что то где то как всегда ускользает от меня..
  • Вопрос задан
  • 52 просмотра
Решения вопроса 1
anatoly_kulikov
@anatoly_kulikov
Wordpress-разработчик
Так, если я правильно понял, то нужно следующее - при нажатии на кнопку вызывается сообщение и через 5 секунд удаляется. И это должно быть без использования onclick на самой кнопке.

Тогда все достаточно просто - вешаем на кнопку событие (addEventListener), которое при нажатии запускает функцию отображения блока. Затем в самой же функции можно указать удаление блока через 5 секунд:

let message = document.querySelector("div[role='alert']");

setTimeout(function () {
    message.remove();
}, 5000);


Потом, я бы посоветовал вам такое сообщение отрисовывать с помощью document.createElement - так его и сконструировать можно как угодно, и потом удалить тем же методом remove() просто.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
OTCloud
@OTCloud
Не кради код ближнего своего.
В рамках данной задачи, повесить обработчик onclick проще всего, но правильнее будет сделать так, чтобы вашим детищем можно было управлять. Значит, делаем список сообщений для отправки и пишем модуль для открытия/закрытия сообщений ( он будет не большой ), а уже из обработчика кнопки вызываем нужную функцию с нужным сообщением из написанного модуля.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы