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 class="header">
<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>
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 class="image"></div>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 aContinue<button>or other solutions are also possible.
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 class="begin">Enter</button>
<div class="scary-image-container">Scary Image Here</div>
<button class="delayed">continue</button>