document.getElementById("clock") is null

Question

dear all.. i have a clock time inside my form..it run as a current time same with PC time.. i'm use this code:

    <script language="javascript">
            var int=self.setInterval("clock()",1000);
            function clock()
                             {
                                var d=new Date();
                                document.getElementById("clock").value=d.getHours() + ":"+d.getMinutes()+ ":" +d.getSeconds();
                           }
      </script>

<input type="text" id="clock" name="time">

but after click submit the clock automatically pause...and show error at firebugs document.getElementById("clock") is null... how to make it works normally by using jquery code?

Answer 1

Difficult to tell exactly what you are trying to ask here, but this is the "jQuery" version of what you're doing:

function updateClock() {
  var d=new Date();
  $("#clock").val(d.getHours() + ":"+d.getMinutes()+ ":" +d.getSeconds());
}
setInterval(updateClock,1000);

Answer 2

are you sure that your id is unique ... otherwise Kobis example works ...

Answer 3

Put the code inside document ready function in jquery.

$(function(){
    var interval=self.setInterval("clock()",1000); 

    function clock() 
    { 
        var d=new Date(); 
        $("#clock").val(d.getHours() + ":"+d.getMinutes()+ ":" +d.getSeconds()); 
    } 
});