Question:
I'm trying to make a message on the success of any operation. As a result, I managed to make the message fly out in a second, but I can’t make the message be deleted after that, it says in the console that the function that closes the window was not found, what’s the problem?
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;
}
<div class="wrapper">
<button>Открыть окно</button>
<div class="window">
Успешно!
</div>
</div>
Answer:
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;
}
<div class="wrapper">
<button>Открыть окно</button>
<div class="window">
Успешно!
</div>
</div>
Option two, as the author wanted to implement …
With bug fixes in the comments…
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;
}
<div class="wrapper">
<button>Открыть окно</button>
<div class="window">
Успешно!
</div>
</div>