setTimeout function doesnt work after 10 seconds, it works as soon as i click on it

Question

I am trying to replace a image 10 seconds after a user click on the start button but however it works instantly.

I tried doing console.log on setTimeoout variable but it shouws 1 second.

what am i doing wrong?

let setTimeOut = setTimeout(changePokeball, 10000)
console.log(setTimeOut)
function changePokeball() {
    document.querySelector(".btn-outline-danger").addEventListener("click", ()=> {
    
        document.getElementById("pokeball-open").style.display = "flex"
        document.getElementById("pokeball-closed").style.display = "none"
        
        })
}

Answer 1

setTimeout is a callback function, you can use it for example this way:

document.querySelector(".btn-outline-danger").addEventListener("click", () => {
        setTimeout(() => {
            document.getElementById("pokeball-open").style.display = "flex";
            document.getElementById("pokeball-closed").style.display = "none";
        }, 10000)
    }
)

the first argument of setTimeout function is a function that you want to use, the second argument is a time in ms after which it will be executed.