Puis-je cacher un lien Html à l'aide de javascript?

C'est un simple exercice dans lequel je veux cacher un lien que j'ai mis dans mon fichier Html.
Mais faire apparaître après une minuterie a courir dans ma fonction.

C'est le peu de javascript
(ci-dessous le code html bits)

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>

où est l'élément avec l'id imageoef?
doit être fixe, lorsqu'il est examiné par des pairs
Je ne comprend pas parce que l'on travaille déjà, pas besoin de payer attention à ce que peu à peu. C'est une image en html, ce qui est caché au premier abord, mais apparaît lorsque le bouton est pressé. Et disparaît lorsque la minuterie. Je juste ne pouvez pas sembler être capable de faire la même chose avec le lien.

OriginalL'auteur user1951350 | 2013-01-05

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/

Merci pour la réponse, mais ce n'est pas tout à fait ce que je cherche. Lorsque j'appuie sur le bouton, une minuterie est désactivée. Lorsque la minuterie atteint zéro, je veux que le lien apparaisse.
afin de mettre le code ci-dessus dans une fonction pour le déjeuner avec un oncleck événement
J'ai ajouté le code pour le lancer avec un clic de bouton.
Il peut ne pas être immédiatement apparent, mais la question est en fait de faire un compte à rebours apparaît, exécutez à partir de 10 à 0, puis faire le lien réapparaître à la fin.
Changé pour afficher le compte à rebours.

OriginalL'auteur Alex W

Si vous avez la place du javascript dans la section en-tête de votre code peut ne pas fonctionner. Parce que vous êtes le stockage de la countdown and link valeur de l'élément au chargement de la page. À ce moment, si vos éléments n'est pas chargée à la page de votre countdown and link vars va être null. la meilleure chose est d'accéder à votre elemet après votre clic sur le bouton.

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

OriginalL'auteur New Developer

0

Votre code ne fonctionne pas, car elle détermine le countdown div à l'innerHTML", mais le lien était à l'intérieur de cette div, donc, est supprimé et vous ne pouvez pas ensuite de la faire réapparaître juste en mettant sa visibilité. Vous pouvez réparer juste en mettant le lien en dehors de la div dans le code 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>
```
Alors que j'y étais j'ai modifié ton script un peu... (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);
}
```
En fait les autres changements sont non essentiel, mais une explication de toute façon:
- idéalement, vous voulez 2 fonctions, pas juste 1 - le premier à déclencher le compte à rebours et la seconde à chaque fois que le compteur diminue
- setInterval est plus utile que setTimeout ici, car il se reproduit automatiquement et vous n'avez pas besoin de garder le réglage de celui-ci; toutefois, vous ne devez utiliser clearInterval pour arrêter la minuterie. Dans votre code original que vous faisiez rien à l'arrêt de la minuterie, de sorte qu'il serait juste continuer indéfiniment (mais avec les effets cachés).
- J'ai préféré onclick en javascript plutôt que d'avoir une onclick attribut de la balise html. Mais votre méthode originale ne travaillent aussi.
(Ici est votre code original avec uniquement les modifications nécessaires pour le faire fonctionner.)

OriginalL'auteur Stuart

Vous devez vous connecter pour publier un commentaire.