JavaScript 카운트 다운 기능이 작동하지 않는 이유는 무엇입니까?

Question

나는이 스크립트를 발견

<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> 

을 내가 그것을 호출하려고 해요 :

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

하지만 아무 일도 일어나지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? JavasScript가 활성화되어 있지만 버튼을 클릭해도 아무런 변화가 없습니다.

Answer 1

스크립트는 setInterval 함수 호출로 시작하여 innerHTML 속성을 사용하여 카운트 다운을 요소에 할당합니다.

버튼에 표시하려면 요소의 value 속성을 사용하고 비헤이비어를 변경해야합니다 (예 : 링크가 작동하지 않음). 버튼 대신 span 또는 div 요소를 사용해야합니다.

Answer 2

몇 가지. 첫째, 스크립트가 html보다 먼저 선언 된 경우, getElementById 호출이 해당 요소가 아직 렌더링되지 않았으므로 오류가 발생했을 수 있습니다. DOM 요소에 액세스 할 때 dom을로드 한 후 또는 문서의 onload 이벤트에 바인드 된 함수에서 스크립트를 실행하여 DOM 요소를로드해야합니다 (선호).

다른 문제는 setInterval을 호출하면 코드가 평가되는 즉시 카운트 다운이 시작되고 버튼을 클릭 할 때까지는 시작하지 않는 것이 좋습니다. 대신이 시도 :

<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> 

이 좋은 코드가 아닙니다, 그러나 당신의 페이지 또는 다른 무슨 일을,이 적어도 당신이 가야한다에 대한 세부 사항의 부족을 부여.

Answer 3

입력 된 코드를 div 태그 안에 넣으면 수정 된 코드가 나타나기 때문에 "다운로드"버튼을 클릭하면 타이머가 시작됩니다.

<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>