2013-11-04 2 views
0

나는 카운트 다운을 수행 웹에서 발견 코드와 사소한 문제에 직면하고와 자바 스크립트 카운트 다운 : 나는에서 getElementById 코드를 통해 분, 초 변수를 얻을하려고하면 작동에서 getElementById

의 주석의 var에 분, 초를하지만, 더 이상 작동하지 않습니다 .. 왜? 어떤 제안이 문제를 해결하기 위해?

<html> 
<head> 

<script> 
    var interval; 
//var minutes = 0; 
//var seconds = 2; 



window.onload = function() { 
    var minutes = document.getElementById("idtextmin").value; 
    var seconds = document.getElementById("idtextsec").value; 
    countdown('countdown'); 
    } 

    function countdown(element) { 
     interval = setInterval(function() { 
      var el = document.getElementById(element); 
      if(seconds == 0) { 
       if(minutes == 0) { 
        el.innerHTML = "countdown's over!";      
        clearInterval(interval); 
        return; 
       } else { 
        minutes--; 
        seconds = 60; 
       } 
      } 
      if(minutes > 0) { 
       var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
      } else { 
       var minute_text = ''; 
      } 
      var second_text = seconds > 1 ? 'seconds' : 'second'; 
      el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; 
      seconds--; 
     }, 1000); 
    } 
</script> 

</head> 
<body> 
<form> 
Min<input type="text" id="idtextmin" name="textmin" value="2" /> 
Sec<input type="text" id="idtextsec" name="textsec" value="9" /> 
</form> 

<div id='countdown'></div> 
</body> 
</html> 

답변

0

코드 다음에 코드를 옮기면 getElementById은 아직 선언되지 않았기 때문에 찾을 수 없습니다. 다른 방법으로 당신의 onload 기능 내부로 이동 :

<script> 
    // Declare them here, assign their initial value 
    // in the onload event when HTML elements will be available 
    var minutes; 
    var seconds; 

    window.onload = function() { 
     minutes = document.getElementById("idtextmin").value; 
     seconds = document.getElementById("idtextsec").value; 
     countdown('countdown'); 
    } 

    function countdown(element) { 
     interval = setInterval(function() { 
      var el = document.getElementById(element); 
      if(seconds == 0) { 
       if(minutes == 0) { 
        el.innerHTML = "countdown's over!";      
        clearInterval(interval); 
        return; 
       } else { 
        minutes--; 
        seconds = 60; 
       } 
      } 
      if(minutes > 0) { 
       var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
      } else { 
       var minute_text = ''; 
      } 
      var second_text = seconds > 1 ? 'seconds' : 'second'; 
      el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; 
      seconds--; 
     }, 1000); 
    } 
</script> 

</head> 
<body> 
<form> 
Min<input type="text" id="idtextmin" name="textmin" value="2" /> 
Sec<input type="text" id="idtextsec" name="textsec" value="9" /> 
</form> 

<div id='countdown'></div> 
</body> 
</html> 
+0

아니오, 그것은 작동하지 않습니다 ... – Tiutto

+0

@ Tiutto 당신의 실제 코드는 무엇입니까?! 나는 내부의 모든 대답을 넣어 편집 할 것입니다 ... –

+0

방금 ​​실제 코드 – Tiutto

0

그 이유는 분과 초를 설정하고 나서 get 요소 ID로 설정했기 때문입니다. 사용하는 코드가 엉망입니다. 또한 신체의 끝에 자바 스크립트를 사용해보십시오. 항상 렌더링을 완료 한 다음 스크립트를 실행하십시오.

0

은 위해 window.onload 함수 내에서 모든 것을 넣어

+1

나는 그것을 실제로 시도했지만 작동하지 않는다. – Tiutto

0

이 나를 위해 작동합니다

이 는
<html> 
    <head> 

     <script> 
      var interval; 
      //var minutes = 0; 
      //var seconds = 2; 

      window.onload = function() { 
       var minutes = document.getElementById("idtextmin").value; 
       var seconds = document.getElementById("idtextsec").value; 
       countdown('countdown'); 

       function countdown(element) { 
        interval = setInterval(function() { 
         var el = document.getElementById(element); 
         if(seconds == 0) { 
          if(minutes == 0) { 
           el.innerHTML = "countdown's over!";      
           clearInterval(interval); 
           return; 
          } else { 
           minutes--; 
           seconds = 60; 
          } 
         } 
        if(minutes > 0) { 
         var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute'); 
        } else { 
         var minute_text = ''; 
        } 
         var second_text = seconds > 1 ? 'seconds' : 'second'; 
         el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining'; 
         seconds--; 
        }, 1000); 
       } 
      } 
     </script> 

    </head> 
    <body> 
     <form> 
      Min<input type="text" id="idtextmin" name="textmin" value="2" /> 
      Sec<input type="text" id="idtextsec" name="textsec" value="9" /> 
     </form> 

     <div id='countdown'></div> 
    </body> 
</html>