Can I hide an Html link using javascript?

Question

It's a simple exercise in which I want to hide a link I put in my Html file. But make it appear after a timer has run out in my function.

This is the javascript bit (below is the html bit)

var i = 10;
var time;
var countdown = document.getElementById("countdown");
var link = document.getElementById("link");

function MyFunction3() {
    document.getElementById("imageoef").style.visibility="visible";
    link.style.visibility="hidden";

    i--;
    countdown.innerHTML= i;
    time = setTimeout ("MyFunction3();",1000);

    if (i < 1) {
        countdown.innerHTML="";
        document.getElementById("imageoef").style.visibility="hidden";
        link.style.visibility="visible";
    }
}

HTML

<img src="images/loading.gif" alt="Loading..." id="imageoef" style="visibility:hidden" />
<form method="post">
    <input onclick="MyFunction3();" type="button" value="start download" />
</form>

<div id="countdown">
    <a id="link" href="http://freelanceswitch.com/freelance-freedom/freelance-freedom-2/" >Your download is ready!</a>
</div>

Solution 1

HTML:

<input type="button" onclick="hideLink()" value="Start" />
<p id="timer"></p>
<a id="link" href="">This link is hidden for 10 seconds.</a>

JavaScript:

var timeLeft = 10;
var count;
window.hideLink = function hideLink()
{
  document.getElementById("link").style.visibility = "hidden";
  count = setInterval (decrementTimer, 1000);
  setTimeout (showLink,1000 * timeLeft);
};

function decrementTimer()
{
  timeLeft = timeLeft - 1;
  document.getElementById("timer").innerHTML = timeLeft + " seconds";
  if(timeLeft <= 0)
  {
    window.clearInterval(count);
    document.getElementById("timer").style.visibility = "hidden";
  }
}

function showLink()
{
  document.getElementById("link").style.visibility = "visible";
}

http://jsfiddle.net/rPnNr/4/

Solution 2

If you have place the javascript in the header section your code may not work. Because you are storing the countdown and link element value at the page loading. At that time if your elements has not get loaded to the page your countdown and link vars going to be null. better thing is access your elemet after your button click.

var i = 10;
var time;
var countdown = document.getElementById("countdown");
var link = document.getElementById("link");

function MyFunction3() {
    countdown = document.getElementById("countdown");
    link = document.getElementById("link");

    document.getElementById("imageoef").style.visibility="visible";
    link.style.visibility="hidden";

    i--;
    countdown.innerHTML= i;
    time = setTimeout ("MyFunction3();",1000);

    if (i < 1) {
        countdown.innerHTML="";
        document.getElementById("imageoef").style.visibility="hidden";
        link.style.visibility="visible";
    }
}

Comments

[user1951350]

Thanks for the reply, but it's not quite what i'm looking for. When I press the button, a timer is set off. When the timer has reached zero, i want the link to appear.

[Ricain]

so put the code above in a function to lunch it with a oncleck event

[Stuart]

It may not be immediately apparent but the question is actually about making a countdown timer appear, run from 10 to 0 then make the link reappear at the end.