Пытаюсь сделать сообщение при успехе какой-либо операции. В итоге получилось сделать так, чтобы сообщение вылетало через секунду, но не могу сделать так, чтобы сообщение после этого удалялось, в консоли пишет, что функция закрывающая окно - не найдена, в чем проблема?
btn = document.querySelector('button');
btn.addEventListener('click', function () {
setTimeout('openWindow()', 1000);
})
function openWindow() {
document.querySelector('.window').style.display = 'block';
setTimeout('closeWindow()', 2000);
function closeWindow() {
document.querySelector('.window').style.display = 'none';
}
}
.wrapper {
width: 600px;
height: 400px;
background-color: #21a1d7;
position: relative;
}
.wrapper .window {
width: 30%;
position: absolute;
height: 30px;
background-color: green;
right: 10px;
top: 10px;
text-align: center;
color: white;
display: none;
}
Ответ
btn = document.querySelector('button'); btn.addEventListener('click', openWindow) function openWindow() { setTimeout(function() { document.querySelector('.window').style.display = 'block'; }, 1111) setTimeout(function() { document.querySelector('.window').style.display = 'none'; }, 2222) } .wrapper { width: 600px; height: 400px; background-color: #21a1d7; position: relative; } .wrapper .window { width: 30%; position: absolute; height: 30px; background-color: green; right: 10px; top: 10px; text-align: center; color: white; display: none; }
Вариант второй, как хотел реализовать автор... С исправленными ошибками в комментариях...
btn = document.querySelector('button'); btn.addEventListener('click', function() { /* не "openWindow()" и даже не openWindow() */ setTimeout(openWindow, 1000); }) function openWindow() { document.querySelector('.window').style.display = 'block'; /* не "openWindow()" и даже не openWindow() */ setTimeout(closeWindow, 2000); function closeWindow() { document.querySelector('.window').style.display = 'none'; } } .wrapper { width: 600px; height: 400px; background-color: #21a1d7; position: relative; } .wrapper .window { width: 30%; position: absolute; height: 30px; background-color: green; right: 10px; top: 10px; text-align: center; color: white; display: none; }
Комментариев нет:
Отправить комментарий