How to show timer after text?

[josh40]

hi all i am just wondering If you can tell me how can i show the timer with text?

like text shows then once you click the button the timer starts to count down

there are 2 examples

first one is with button how i like it to be but text showing before timer starts to count down
this one dont show text before it counts down with the button i got the button and timer working but not the text

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // Set the date we're counting down to
    var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();

    // Update the count down every 1 second
    var x = setInterval(function() {

        // Get todays date and time
        var now = new Date().getTime();
        
        // Find the distance between now an the count down date
        var distance = countDownDate - now;
        
        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        // Output the result in an element with id="demo"
        document.getElementById("demo").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";
        
        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(x);
            document.getElementById("demo").innerHTML = "EXPIRED";
        }
    }, 1000);


<!-- language: lang-html -->

    <button id="demo"><div class="button"; claim  value="100";>Visit Website</div>

<!-- end snippet -->

this is where i like the button to be added the above example

<!-- language: lang-html -->

    <td id="reset"><a href="https://faucetpig.com" target="_blank"><div class="button"; value="100";>Visit Website</div></a></td>

<!-- end snippet -->

[Paul_Wilkins]

You’re wanting the countdown to not occur until the button is clicked, so you need to place the countdown code into a function so that you can call that function later on.

function countdown() {
    // countdown code
}

You can then set a timeout of 5 seconds giving people time to read the text, before the countdown begins:

setTimeout(countdown, 5000);

Here’s some sample code showing this working: https://jsfiddle.net/uapr1xhp/