Pourquoi ma fonction de compte à rebours JavaScript ne fait-elle rien?

Question

Je trouve ce script:

<script language="Javascript" TYPE="text/javascript"> 
var container = document.getElementById('dl'); 
var seconds = 10; 
var timer; 
function countdown() { 
    seconds--; 
    if(seconds > 0) { 
     container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..'; 
    } else { 
     container.innerHTML = '<a href="download.php">Download</a>'; 
     clearInterval(timer); 
    } 
} 
timer = setInterval(countdown, 1000); 
</script> 

et je suis en train de l'appeler avec:

<input type="button" onclick="countdown()" id="dl" value="Download" /> 

, mais rien ne se passe. Qu'est-ce que je fais mal? J'ai JavasScript activé, mais rien ne se passe après que je clique sur le bouton.

Answer 1

Le script commence lui-même avec l'appel de la fonction setInterval et affecte le compte à rebours à l'élément avec la propriété innerHTML. Si vous voulez montrer que dans le bouton, vous devez utiliser la propriété value de l'élément et modifier le comportement (c'est-à-dire que le lien ne fonctionnera pas ici) ou utiliser un élément span ou div à la place du bouton.

Answer 2

Couple de choses. Tout d'abord, si le script est déclaré avant votre code HTML, vous obtenez probablement une erreur sur l'appel getElementById car cet élément n'a pas encore été rendu. Lorsque vous accédez aux éléments dom, vous devez le faire après le chargement de dom, ou (de préférence) en exécutant votre script dans une fonction liée à l'événement onload du document.

Votre autre problème est que votre appel à setInterval déconnecte immédiatement le compte à rebours dès que ce code est évalué, alors que vous ne voulez pas qu'il démarre avant que le bouton ne clique. Essayez ceci:

<div id="dl"></div> 
<input type="button" onclick="setInterval(countdown, 1000);" id="dl" value="Download" /> 

<script language="Javascript" TYPE="text/javascript"> 
var container = document.getElementById('dl'); 
var seconds = 10; 
var timer; 
function countdown() { 
    seconds--; 
    if(seconds > 0) { 
     container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..'; 
    } else { 
     container.innerHTML = '<a href="download.php">Download</a>'; 
     clearInterval(timer); 
    } 
} 
</script> 

Notez que ce n'est pas grand code, mais étant donné le manque de détails sur votre page ou ce que vous faites autre, cela devrait au moins obtenir que vous allez.

Answer 3

J'ai corrigé le code que vous avez posté en mettant le type d'entrée dans les balises div de sorte qu'il supprime le bouton "télécharger" une fois que vous cliquez dessus et le minuteur commence.

<div id="dl"> 
    <input type="button" onclick="setInterval(countdown, 1000);" id="dl" value="Download" /> 
</div> 
<script language="Javascript" TYPE="text/javascript"> 
    var container = document.getElementById('dl'); 
    var seconds = 10; 
    var timer; 
    function countdown() { 
     seconds--; 
     if(seconds > 0) { 
      container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..'; 
     } else { 
      container.innerHTML = '<a href="File or Page Location">Download File</a>'; 
      clearInterval(timer); 
     } 
    } 
</script>