HTML JavaScript Conditional href link based on timer

Question

I am trying to re-direct user to a specific page based on condition. If Timer still running open booknow.html if timer expired open booknowcode.html

Pseudo code

Timer still running

User clicks Book Now button If condition : a) if timer still running -> send user to booknowcode.html page b) if timer expired -> send user to booknow.html page

// Set the date we're counting down to
var countDownDate = new Date("June 30, 2021 09:17:25").getTime();

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

  // Get today's 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="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s " + "Discount 15%";

  // If the count down is over, write Expired text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  }
  //===if timer still running then redirect to dicount page (distance more than zero) Start ===
  let link;

  if (distance <= 0) {
    link = "booknow.html";
  } else {
    link = "booknowcode.html";
  }
  document.getElementById("demo").innerHTML = link;
  //===if timer still running then redirect to dicount page (distance more than zero) End ===

}, 1000);

<div class="timer-button" id="conditional-button">
  <p id="timer"></p>
  <a href="booknow.html">
    <button class="btn btn-info" type="button" onclick="">Book Now</button>
  </a>
</div>

<p id="demo"></p>

So how do I replace booknow.html with booknowcode.html based on the timer condition?

Unmitigated · Answer 1 · 2021-06-23T17:59:30.323

3

You should set the href instead of the innerHTML.

document.querySelector("#conditional-button a").href = link;

edited Jun 23 '21 at 17:59

answered Jun 23 '21 at 17:48

Unmitigated

76,500
11
62
80

This will mutate the full url, use setAttribute instead of this – Tim Givois Jun 23 '21 at 18:08
@TimGivois `setAttribute` will do the exact same thing in this case—try it. See also: https://stackoverflow.com/questions/3919291/when-to-use-setattribute-vs-attribute-in-javascript – Unmitigated Jun 23 '21 at 18:12
yes it does the same thing for some attributes. For href it does not do the same thing, see also: https://javascript.info/dom-attributes-and-properties#dom-properties-are-typed – Tim Givois Jun 23 '21 at 18:14
2

@TimGivois That's only a difference in retrieving the attribute, not setting it. Try it yourself or see the results here: https://jsfiddle.net/1f57njt4/ – Unmitigated Jun 23 '21 at 18:18
Based on the documentation, I thought that `.href` and `setAttribute` behave the same as `.href` and `getAttribute`. I'll give it to you this time! – Tim Givois Jun 23 '21 at 18:38
Thank you to all contributors, mplungjan Started TimGivois added some things to consider and iota finished it. I didn't get to Kinglish solution , its probable also good one, but I already made it work with Version 2 solution from mplungjan and with iota modification. – AlecTech Jun 23 '21 at 21:33

mplungjan · Accepted Answer · 2021-06-23T18:14:33.523

Like this

Version 1

Remove the button and make it a link
give the link an ID
change to document.getElementById("link").href = "booknowcode.html"; when timer expires

// Set the date we're counting down to
var countDownDate = new Date("June 30, 2021 09:17:25").getTime();
// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;


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

  // Get today's date and time
  now = new Date().getTime();

  // Find the distance between now and the count down date
  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="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s " + "Discount 15%";

// If the count down is over, write Expired text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";

  //===if timer stops, the link changes  ===

    document.getElementById("link").href = "booknowcode.html";
  }




}, 1000);

<div class="timer-button" id="conditional-button">
  <p id="timer"></p>
  <a href="booknow.html" class="btn btn-info" id="link">Book Now</button>
</div>

Version 2

Remove the link around the button and make it a button
Add an eventListener on the click of the button
Test the distance in the click handler
change document.getElementById("demo").innerHTML = link; to location = link when running

// Set the date we're counting down to
var countDownDate = new Date("June 30, 2021 09:17:25").getTime();
// Get today's date and time
var now = new Date().getTime();

// Find the distance between now and the count down date
var distance = countDownDate - now;


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

  // Get today's date and time
  now = new Date().getTime();

  // Find the distance between now and the count down date
  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="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s " + "Discount 15%";

  // If the count down is over, write Expired text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  }
  //===if timer still running then redirect to dicount page (distance more than zero) Start ===
  let link;



}, 1000);
document.getElementById("but").addEventListener("click", function() {
  if (distance <= 0) {
    link = "booknow.html";
  } else {
    link = "booknowcode.html";
  }
  document.getElementById("demo").innerHTML = link;
  // change this to 
  // location  = link; 
  // when running

  //===if timer still running then redirect to dicount page (distance more than zero) End ===
})

<div class="timer-button" id="conditional-button">
  <p id="timer"></p>
  <button class="btn btn-info" id="but" type="button">Book Now</button>
</div>

<p id="demo"></p>

you shouldn't be using buttons to create links. You can change the button for an anchor and then instead of chaning the innerHTML, you can use setAttribute — Tim Givois, Jun 23 '21 at 18:12

Kinglish · Answer 3 · 2021-06-23T17:53:45.637

Just apply your new link to the <a> (which I gave a data-attribute to make our replacement exact)

if (distance <= 0) {
  // ....
  document.querySelector('a[data-rel=book-link]').setAttribute('href', link)

I wasn't sure why you had a button inside of an anchor tag, so I removed the button and applied the css to the a and it should look the same.

// Set the date we're counting down to
//var countDownDate = new Date("June 30, 2021 09:17:25").getTime();
countDownDate = new Date().getTime() + 10000;
// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's 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="timer"
  document.getElementById("timer").innerHTML = days + "d " + hours + "h " +
    minutes + "m " + seconds + "s " + "Discount 15%";
  let link;

  // If the count down is over, write Expired text 
  if (distance <= 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
    link = "booknow.html";
    document.querySelector('a[data-rel=book-link]').setAttribute('href', link)

  //===if timer still running then redirect to dicount page (distance more than zero) Start ===
  } else {
    link = "booknowcode.html";
  }
  document.getElementById("demo").innerHTML = link;
  //===if timer still running then redirect to dicount page (distance more than zero) End ===

}, 1000);

<div class="timer-button" id="conditional-button">
  <p id="timer"></p>
  <a data-rel='book-link' href="booknow.html" class="btn btn-info">Book Now</a>
</div>

<p id="demo"></p>

HTML JavaScript Conditional href link based on timer

3 Answers3