CODEWITHSUNDEEP
javascripthtmlhyperlink
user1951350
user1951350

Reputation: 41

Can I hide an Html link using javascript?

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>

Upvotes: 4

Views: 27943

Answers (3)

Stuart
Stuart

Reputation: 9858

Your code doesn't work because it sets the countdown div's innerHTML to '', but the link was inside that div, so gets deleted and you can't then make it reappear just by setting its visibility. You could fix it just by putting the link outside of the div in the HTML.

<img src="images/loading.gif" alt="Loading..." id="imageoef" style="visibility:hidden"
/>
<form method="post">
  <input id="myInput" type="button" value="start download" />
</form>
<div id="countdown"> 
</div><a id="link" href="http://freelanceswitch.com/freelance-freedom/freelance-freedom-2/">Your download is ready!</a>

While I was at it I altered your script a bit... (jsfiddle)

var i = 10,
  time;
function E(id) {return document.getElementById(id) }
E('myInput').onclick = function () {
  E('imageoef').style.visibility = 'visible';
  E('link').style.visibility = 'hidden';
  time = setInterval(function () {
    i--;
    E('countdown').innerHTML = i;
    if (i < 1) {
      clearInterval(time);
      E('countdown').innerHTML = '';
      E('imageoef').style.visibility = 'hidden';
      E('link').style.visibility = 'visible';
    }
  }, 1000);
}

Actually the other changes are all non-essential but some explanation anyway:

  • you ideally want 2 functions, not just 1 - the first to trigger the countdown and the second for each time the counter decreases
  • setInterval is more useful than setTimeout here, as it recurs automatically and you don't need to keep setting it; however you do then need to use clearInterval to stop the timer. In your original code you were doing nothing to stop the timer so it would just carry on indefinitely (but with the effects hidden).
  • I preferred to set onclick in javascript rather than having an onclick attribute of the html tag. But your original method does also work.

(Here is your original code with only the necessary changes to make it work.)

Upvotes: 0

New Developer
New Developer

Reputation: 3305

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";
    }
}

Upvotes: 2

Alex W
Alex W

Reputation: 38223

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/

Upvotes: 5

Related Questions