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.