There is a button and two pictures. It is necessary that when you click on the button, the first picture (img1) appears for 5 seconds and then disappears, and the second (img2) just appears, without disappearing.

<button id="btn"></button> <p class="img1"><img src="img1.jpg" align="center"></p> <p class="img2"><img src="img2.jpg" align="center"></p>
  • I do not know how to solve this problem, so I turned with a question. Share the link, please, if you have found a solution. - A.Hall
  • by pressing a button, perform 3 actions: a) show picture-1; b) show the picture-2; c) start the timer for 5 seconds, which, having worked, will hide the picture-1. Which of these three actions causes you difficulty? - Sergiks
  • All my actions cause complexity. - A.Hall

1 answer 1

 <script> var Btn = function() { var img1 = document.getElementById('img1'); var img2 = document.getElementById('img2'); img1.style.display = 'block'; img2.style.display = 'block'; setTimeout(function() { img1.style.display = 'none'; }, 5000); }; </script> <button onclick="Btn();"></button> <p id="img1" style="display: none;" ><img src="img1.jpg" align="center"></p> <p id="img2" style="display: none;" ><img src="img2.jpg" align="center"></p>