Trying to make a message with the success of any operation. As a result, it turned out to make the message fly out in a second, but I can’t make the message delete after that, in the console it says that the function closing the window is 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>

  • Well, the script is looking for the string 'closeWindow ()' for you, this is not a function launch, but a string ... Which you didn’t initialize anywhere .. - Air

1 answer 1

 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 realize ...
With corrected errors 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>

  • There is no closing at all :) It was also possible for me to do it :) - uzi_no_uzi
  • closing in a second? - Air
  • I need to open in a second, and then close in two, so that it opens I did, in fact I did something to close, but I don’t understand why setTimeout doesn’t see the function that closes the window - uzi_no_uzi
  • I don’t watch setTimeout(function() {}, time) at all - Air
  • I apologize, for some reason the whole JS code has not been inserted, take a look now - uzi_no_uzi