How to hide an element if a button was not clicked for a certain amount of time

Question

I am writing a simple Coin Flip project to hone my JS skills.

I have a <div id="winMessage"> and I want it to be hidden if I don't click the button for a few seconds. How can I achieve something like this?

I have tried using style.visibility and sleep() to hide/show it between lines but it seems so inefficient and causes lots of problems on other parts.

let heads = 0, tails = 0;

let coinFlip = () => {
    let flip = () => {
        return Math.floor((Math.random() * 2) + 1);
    }

    let result = flip();

    if (result === 1){
        heads++;
        document.getElementById("winMessage").innerHTML = "Heads!"
    }

    else if (result === 2) {
        tails++;
        document.getElementById("winMessage").innerHTML = "Tails!"
    }

    document.getElementById("heads").innerText = heads;
    document.getElementById("tails").innerHTML = tails;
}

<head>

    <title>Coin Flipper</title>
    <link rel="stylesheet" href="style.css" class="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
</head>

<body class="bg-dark text-warning" style="margin: auto;">
    <header>
        <h1>Coin Flip</h1>
    </header>

    <form>
        <div>
            <button type="button" class="btn btn-warning" onclick="coinFlip()" style="width: 100%;">Flip It!</button>
        </div>
    </form>

    <div id="winMessage" style="float: center; text-align: center; font-size: 100px; padding-bottom: 10px;"></div>

    <div style="float: center; text-align: center;">
        <div>Heads Count: <div id="heads" style=></div></div>
        <div>Tails Count: <div id="tails"></div></div>
    </div>

</body>
```

wscourge · Accepted Answer

Use setTimeout() and clearTimeout():

const hide = setTimeout() in main scope, with your delay as a second argument
clearTimeout(hide) on the button click
element.style.display = "none" to hide the element
optionally, as you use Bootstrap, I guess you can use jQuery .hide() instead

let heads = 0, tails = 0;

let coinFlip = () => {
    clearTimeout(hide);
    let flip = () => {
        return Math.floor((Math.random() * 2) + 1);
    }

    let result = flip();

    if (result === 1){
        heads++;
        document.getElementById("winMessage").innerHTML = "Heads!"
    }

    else if (result === 2) {
        tails++;
        document.getElementById("winMessage").innerHTML = "Tails!"
    }

    document.getElementById("heads").innerText = heads;
    document.getElementById("tails").innerHTML = tails;
}


const hide = setTimeout(() => {
  document.getElementById('winMessage').style.display = 'none'
}, 3000)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous">
<header>
    <h1>Coin Flip</h1>
</header>

<form>
    <div>
        <button type="button" class="btn btn-warning" onclick="coinFlip()" style="width: 100%;">Flip It!</button>
    </div>
</form>

<div id="winMessage" style="float: center; text-align: center; font-size: 100px; padding-bottom: 10px;">Hides after 3000ms</div>

<div style="float: center; text-align: center;">
    <div>Heads Count: <div id="heads" style=></div></div>
    <div>Tails Count: <div id="tails"></div></div>
</div>

How to hide an element if a button was not clicked for a certain amount of time

Tags:

javascript

html

Özenç B.

1 Answers

wscourge

Recent Activity

Donate For Us

How to hide an element if a button was not clicked for a certain amount of time

Tags:

javascript

html

Özenç B.

1 Answers

wscourge

Related questions

Recent Activity

Donate For Us