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

Question

[lagudal]

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

Answer 1

[Анатолий Куликов]

Так, если я правильно понял, то нужно следующее - при нажатии на кнопку вызывается сообщение и через 5 секунд удаляется. И это должно быть без использования onclick на самой кнопке.

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

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

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

Потом, я бы посоветовал вам такое сообщение отрисовывать с помощью document.createElement - так его и сконструировать можно как угодно, и потом удалить тем же методом remove() просто.

Comments

[lagudal]

да, примерно так - спасибо.
Это стандатное поведение оповещений в magento2, например, при добавлении товара в корзину.
Там по клике на кнопку "add to cart" помимо всей прочей php js и ajax логики выводит такое оповещение, которое почему то не скрывается. Поэтому искать встроенный обработчик и что то в нем менять ну его...
Вроде все получается - сейчас протестирую уже непосредственно на magento.
Единственное, хотелось бы добавить плавности при скрытии, пока сделал на css, так как мне так привычнее, да и вообще неясно, можно ли сделать на ванильном js проще - вроде это уже прерогатива animation.delay...

[lagudal]

В общем, на живой magento наблюдается следующая ситуация.
При первом клике сообщение не скрывается - Cannot read property 'remove' of null
Т.е. как будто он не успевает увидить вот этот элемент - document.querySelector("div[role='alert']");
Второй клик отрабатывает как положено, скрывает, но уже по третьему и следующим кликам не выводит сообщение вообще...
ps. Сейчас сделал все таки вместо remove() целиком только удаление внутреннего содержимого - innerHMML = "" - все последующие клики кроме самого первого отрабатывают нормально.
Осталось только первое добавленное сообщение чтобы удалялось и вроде все ))