I am trying to create a simple function when on click a series of style changes happen to an element.
I want to add a 4-second delay in between the two style changes that I make. I've found a few methods of adding delays before and after a function but not inside a function how can I achieve this?
My Code:
const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")
document.getElementById("chp1sub").style.backgroundColor = "red";
btnEl.addEventListener("click", function(){
subtl.style.backgroundColor = "blue"
// 4 second delay here before running next line
subtl.style.transform = "translateY(-90px)"
})
Would really appreciate any advice on this
You can simply use the setTimeout method, it runs a function after the time you set in milliseconds. To achieve what you need, you have to set an anonymous function to it.
setTimeout(() => {
/* Code to run after 4 seconds */
}, 4000)
const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")
document.getElementById("chp1sub").style.backgroundColor = "red";
btnEl.addEventListener("click", function(){
subtl.style.backgroundColor = "blue"
setTimeout(() => {
// 4 second delay here before running next line
subtl.style.transform = "translateY(-90px)"
}, 4000)
})
You can simply use CSS transition-delay inside that function
Create an anonymous inner function called by setTimeout
const btnEl = document.getElementById("btnel")
const subtl = document.getElementById("chp1sub")
document.getElementById("chp1sub").style.backgroundColor = "red";
btnEl.addEventListener("click", function(){
subtl.style.backgroundColor = "blue"
setTimeout(function(){
subtl.style.transform = "translateY(-90px)"
},4000)
})
Alternately, because this is a CSS transition, you can use CSS transition-delay with this translation.