Cannot get document.getElementById() to find my textarea

Maybe I've been working on my site for to long, but I can't get the following to work. I am having my textarea fire an onkeyup() event called limiter which is supposed to check the textarea and limit the text in the box, while updated another readonly input field that shows the amount of characters left.

This is the javascript code:

<script type="text/javascript">
var count = "500";
function limiter(){
    var comment = document.getElementById("comment");
    var form = this.parent;
    var tex = comment.value;
    var len = tex.length;
    if(len > count){
        tex = tex.substring(0,count);
        comment.value =tex;
        return false;
    }
    form.limit.value = count-len;
}
</script> 

The form looks like this:

<form id="add-course-rating" method="post" action="/course_ratings/add/8/3/5/3" 
accept-  charset="utf-8"><div style="display:none;"><input type="hidden" 
name="_method"    value="POST" />


    //Other inputs here

    <div id="comment-name" style="margin-top:10px">
    <div id="comment-name-text">
    <b>Comments</b><br />
    Please leave any comments that you think will help anyone else.
    </div>
    <style type="text/css">
    .rating-form-box textarea {
        -moz-border-radius:5px 5px 5px 5px;
    }
    </style>
    <div class="rating-form-box">
             <textarea name="data[CourseRatings][comment]" id="comment" 
                 onkeyup="limiter()" cols="115" rows="5" ></textarea>
                 <script type="text/javascript">
                     document.write("<input type=text name=limit size=4 
                     readonly 开发者_开发技巧value="+count+">");
                 </script>
    </div>
<input type="submit" value="Add Rating" style="float: right;">
</form>

If anyone can help that would be great.

You have:

onkeyup="limiter()"

Since you aren't calling limiter in the context of an object, you are calling window.limiter.

var form = this.parent;

So this is window and form is window.parent, which is the same as window (unless the document is loaded in a frame).

You want to make this the form control. Do this using event binding in unobtrusive JavaScript.

(And don't use an input as an element solely for displaying output, it does not make sense. You probably want to use a label associated with the textarea … and to use another label for <b>Comments</b><br />Please leave any comments that you think will help anyone else.)

Would this work for your? Example Link

EDIT:
You should pass the element instance with the function call onkeyup="limiter(this)" this way in your function you'll have a reference to the object that called this function, now your function will be something like:

function limiter(a) {
    var comment = a;
    var form = document.getElementById('add-course-rating');
    var tex = comment.value;
    var len = tex.length;
    if (len > count) {
        tex = tex.substring(0, count);
        comment.value = tex;
        return false;
    }
    form.limit.value = count - len;
}

Also no need to create element dynamically if you don't really need that! so just set the value of the readonly with Javascript:

<input type="text" name="limit" id="limit" size="4" readonly value="">
<script type="text/javascript">
  var limit = document.getElementById('limit');
  limit.value = count;
</script>

And you are good to go!