second button delay after first button is clicked-CodePudding

So basically for fun I am making a spooky website. Once the user clicks on the enter button a scary face pops up. After 3 seconds of the image popping up I want another button that says "Continue" so the user can go on to the next html page but have no clue on how to do so. I am not great with Javascript or Jquery. Here is all I have so far....

    <html>
     <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
      .header {
      justify-content: center;
      text-align: center;
      font-size: 170%; 
      color: black;
    font-family: Papyrus;
      
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
   padding: 70px 200px;
   margin: 59px;
   background-position: center top;
   background-repeat: no-repeat;
   background-image: url("https://i.postimg.cc/13dfXzBt/Shadow-Men.jpg");
   background-size: 950px 1000px;
   background-color: #000000;
}

button {
  background-color: red;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  font-family: Papyrus;
  font-weight : bold ;
  margin: 0 auto;
  cursor: pointer;
  position: center;
  justify-content: center;
}


#jumpscare{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
visibility:hidden;
}


</style>


<body>

<div >
     <h1><span style="color:red">T</span>he <span style="color:red">E</span>xorcist <span style="color:red">H</span>ouse</h1>
    </div>  
    
<button onclick="jumpscare();"> Enter </button>
<img id="jumpscare" src="img_scaryface.jpg"/>

<script>
function jumpscare(){
var jumpscare = document.getElementById("jumpscare");
jumpscare.style.visibility="visible";
}

</script>

 </body>  
</html>

CodePudding user response：

Maybe. Also, it would make more sense to use display than visibility.

$('#butonOne').on('click', function(){
      $('.image').css('visibility', 'visible')
      $('#butonOne').css('visibility', 'hidden')
      
      
    $('.image').delay(3000).fadeOut(0)
    $('#butonTwo').delay(3000).fadeIn(0)
})

#butonTwo{
  display: none;
}

.image{
  width: 10rem;
  height: 10rem;
  background: blue;
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="butonOne"> Enter </button>
 
 <button id="butonTwo"> Enter </button>
 
 <div ></div>

CodePudding user response：

Essentially what you are looking for is setTimeout() which will call the provided function after a given time in milliseconds (3 seconds => 3000 milliseconds).

window.addEventListener("DOMContentLoaded", e => {
    const enterBtn = document.getElementById("enter");
    const continueBtn = document.getElementById("continue");
    const scaryFace = document.getElementById("scaryFace");

    // whenever the enter button is clicked
    enterBtn.addEventListener("click", e => {
        console.log("Ahh, jumpscare!")
        scaryFace.style.visibility = "visible";
        setTimeout(() => {
            // at least 3 seconds are gone => show the "continue" button
            console.log("3 seconds are gone...")
            continueBtn.style.visibility = "visible";
        }, 3000)
    })
    // when the continue button is clicked
    continueBtn.addEventListener("click", e => {
        continueBtn.style.visibility = "hidden";
        scaryFace.style.visibility = "hidden";
        console.log("Continue with whatever you want to do now");
    })
})

<button id="enter">Enter</button>
<button id="continue" style="visibility: hidden;">Continue</button>
<img id="scaryFace" style="visibility: hidden;" src="https://dummyimage.com/600x100/000/fff&text=scary face">

This implementation simply shows/ hides some HTML elements whenever necessary you could of course completely remove them from the DOM or navigate to another page. You could also just use <a> tag instead of a Continue <button> or other solutions are also possible.

CodePudding user response：

A one-off delay is achieved using setTimeout (see https://developer.mozilla.org/en-US/docs/Web/API/setTimeout )

setTimeout takes two arguments, the first is a reference to the function you want to execute after the delay, the second is the duration of the delay, in milliseconds:

setTimeout(myfunction(), "1000");
// function myfunction called afer a one second delay;

For simple functions, such as your need to change the visibility style of you button, the function can be included as an anonymous function inside the argument:

        setTimeout(() => {
          document.getElementsByClassName("delayed")[0].style = "visibility: visible";
        }, "3000")
// style changes to make button visible after 3 seconds;

The snippet shows a working example using setTimeout. It also uses an event listener to handle all click, with conditionals to determine which button was pressed. You might optionally set the visibility of the first button to hidden inside its event conditional so that users don't press it repeatedly while waiting for something to happen.

document.addEventListener('click', event => {

  if (event.target.className == "begin") {
    // show image;
    document.getElementsByClassName("scary-image-container")[0].style = "visibility: visible";
    
    // trigger timer for next button;
    setTimeout(() => {
      document.getElementsByClassName("delayed")[0].style = "visibility: visible";
    }, "3000")
    
  } // end if begin button pressed;

  else
  
  if (event.target.className == "delayed") {
    // link to next page;
    console.log("enter button pressed"); 
  } // end else if continue button pressed;


}); // end event listener;

.scary-image-container {
 visibility: hidden;
 width: 200px;
 aspect-ratio: 1;
 background: yellow;
}

.delayed {
  visibility: hidden; {
}

<button >Enter</button>
<div >Scary Image Here</div>
<button >continue</button>

CodePudding user response：

I think you can try something like this - use setTimeout() to run some code to display the continue link after the jumpscare is displayed! Good luck