How to use a function to open a link in html

Question

I'm creating a website thats going to work like an online advent calendar; I want to be able to make sure that a link wont open until the correct day. Heres what I have so far:

<area shape="rect" coords="0,0,90,150" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" alt="1" target="_blank" onClick="return canOpen(this)">

  <script>
    function canOpen(isTrue) {
      var isOpen = new Date("Dec "+isTrue+", 2020 00:00:00").getTime();
      var currentTime = new Date().getTime();
      var timeDifference = isOpen - currentTime;

      if (timeDifference > 0) {
        <! Go to link>
      }
      else {
        <! Show popup "You can't open this yet!>
      }
  }
  </script>

How could I make it so that you can go to the link if it is past the date in question, and how would I get the value of alt out of the link and into the script?

Thanks for any help.

Does this answer your question? [Open a URL in a new tab (and not a new window)](https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window) — Omri Attiya, Nov 14 '20 at 05:15
Also - the first result on google when you search for [open link in js](https://www.w3schools.com/jsref/met_win_open.asp) — Omri Attiya, Nov 14 '20 at 05:17

thanhdx · Accepted Answer · 2020-11-14T05:12:35.783

You can use Element.getAttribute() to get attribute alt as event date for check in script.
Then check if the current date passed event date, redirect by change site's location, or do anything else you like otherwise, if the element has redirect as default behavior (like a tag), you will need return false; to prevent default behavior.

function canOpen(element) {
  var isOpen = new Date("Dec "+element.getAttribute("alt")+", 2020 00:00:00").getTime();
  var currentTime = new Date().getTime();
  var timeDifference = isOpen - currentTime;

  if (timeDifference > 0) {
    window.location.href = element.getAttribute("href");
  } else {
    alert("Not yet!");
    // return false; // for `a` tag
  }
}

Omar Shishani · Answer 2 · 2020-11-14T05:30:54.307

I created two functions, one to set the date, and one to check if the link can open. If the release date has passed, the href of the link changes from "#" to the Youtube link. The date updates every second with setInterval.

Example on JSFiddle

Also, did I just get RickRolled?

  <a id="premiere-link" href="#">Youtube Link</a>

  <script>
    // setInterval(canOpen, 1000);
    let month, day, year, time;
    const link = document.getElementById('premiere-link');
    setDate(); //set date immediatly on page load
    setInterval(setDate, 1000); //update date every second
    function setDate() {
      var dateObj = new Date();
      month = dateObj.getUTCMonth() + 1; //months from 1-12
      day = dateObj.getUTCDate();
      year = dateObj.getUTCFullYear();
      time = dateObj.getTime();
    }
    function canOpen(month, day){
      //set month and day for release
      if (month >= 11 && day >= 1) {
        alert('You just got RickRolled')
        link.setAttribute('href', 'https://www.youtube.com/watch?v=dQw4w9WgXcQ');
      } else {
        link.setAttribute('href', '#');
        alert('You have to wait to get RickRolled')
      }
    }
    link.onclick = () => {canOpen(month, day)};
  </script>

How to use a function to open a link in html

2 Answers2