Accessing form element on load

This is the form and link i have in html. <%= link_to_function "sample", "update_timer()" %> <form name="f"> <input type="text" name="time_left" class="time_left"> </form>

onload of the page, i was showing the timer the update_timer() function.

<script> var page_loaded_ms = new Date().getTime(); var timeout_ms = 20*1000;

function update_timer() {         var time_left = Math.round((timeout_ms - new Date().getTime() + page_loaded_ms) / 1000);         var minutes = Math.floor(time_left/60);         var seconds = time_left - (minutes*60);         $('time_left').value = 'Time left: '+ minutes + ' min ' + zeroPad(seconds, 2) + ' sec';

       if (minutes >= 0 && seconds > 0)         setTimeout("update_timer()", 100);        else          {          clearTimeout();          alert("timeOut");          exit();          } }

function zeroPad(number, width) {         var s = number.toString();         while (s.length < width)                 s = "0" + s;         return s; }

</script>

while the page gets loaded the script was called , but the value was not written to the text field. But when clicking i was able to see the time in the text_field. Could anyone suggest me a solution for this.