CODEWITHSUNDEEP
javascripthtmlcountdown
Austin Duncan
Austin Duncan

Reputation: 33

Adding a Button to a Javascript Countdown

I'm incredibly new to Javascript and don't know it very well. However, I've managed to create a countdown timer that semi-works like I want it to. It's pretty simple but it's basically a timer that counts down to a specific date, and then once it reaches the specified date and time, it then displays text that I can customize. I would love for this code be able to display a button with a hyperlink once the countdown reaches zero. Here is the code that I have so far:

// Set the date we're counting down to
var countDownDate = new Date(Date.now() + 20000).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 and 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 + " days, " + hours + " hours, " +
    minutes + " minutes, & " + seconds + " seconds";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "We're Live on Facebook!";
  }
}, 1000);
<p id="demo" class="countdown-live" style="text-align:center;"></p>

Any help getting this to display a hyperlinked button instead of the text "We're Live On Facebook!" would be greatly appreciated.

Upvotes: 2

Views: 3811

Answers (6)

Maxime Girou
Maxime Girou

Reputation: 1560

In the innerHTML() property you can pass a a HTML tag like 

<a href="...">
  <button> YOUR TEXT </button> 
</a>

Upvotes: 5

Mr.Deer
Mr.Deer

Reputation: 476

You could try this: 

document.getElementById("demo").innerHTML = "<a href='https://www.youUrl.com'>We're Live on Facebook!</a>";

with innerHTML property you can add raw HTML. You could also add a hidden tag and then make it visible:

for visible: 

document.getElementById("yourID").style.visibility = "visible";

for not visible: 

document.getElementById("main").style.visibility = "hidden";

I hope this help you.

Upvotes: 1

William Jones
William Jones

Reputation: 1129

You'll need to create a button like so:

<button id="myButton" style="display:none"><a href="example.com">Button Text</a></button>

And then you can show it through JavaScript like so:

document.getElementById("myButton").style.display = "inline";

Upvotes: 1

brk
brk

Reputation: 50291

In html after p add a button and a dd a class to it to initially hide it

<p id="demo" class="countdown-live" style="text-align:center;"></p>
<button id='liveButton' type='button' class='hide'>Your Text</button>

In css add class hide

.hide{
 display:none;
}

In js when it i reached 0 remove that class

if (distance < 0) {
    clearInterval(x);
    document.getElementById("liveButton").classList.remove('hide')
    document.getElementById("demo").innerHTML = "We're Live on Facebook!";
  }

Upvotes: 0

Painguin
Painguin

Reputation: 1167

You can just make an HTML button element with a link to the page you're trying to direct to. Make sure you give the button an ID of 'demo' so it works with your current code

<button id="demo" onclick="window.location.href = 'https://www.facebook.com/';">We're live on Facebook!</button>

Upvotes: 1

James Coyle
James Coyle

Reputation: 10388

Just add the HTML to the string you are setting:

// Set the date we're counting down to
var countDownDate = new Date(Date.now() + 20000).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 and 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 + " days, " + hours + " hours, " +
    minutes + " minutes, & " + seconds + " seconds";

  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = '<a href="https://facebook.com">We\'re Live on Facebook!</a>';
  }
}, 1000);
<p id="demo" class="countdown-live" style="text-align:center;"></p>

Upvotes: 3

Related Questions