Не удается получить document.getElementById(), чтобы найти текстовое поле

Question

Возможно, я долгое время работал над своим сайтом, но я не могу заставить его работать. У меня есть textarea fire событие onkeyup(), называемое ограничителем, которое должно проверять текстовое поле и ограничивать текст в поле, а также обновлять другое поле ввода только для чтения, которое показывает количество оставшихся символов.

Это Javascript код:

<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> 

форма выглядит следующим образом:

<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> 

Если кто-то может помочь, что было бы здорово.

Answer 1

Будет ли это работать для вашего? Example Link

EDIT:
Вы должны передать экземпляр элемента с вызовом функции onkeyup="limiter(this)" этот путь в вашей функции вы будете иметь ссылку на объект, который вызвал эту функцию, теперь ваша функция будет что-то вроде:

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; 
} 

Также не нужно создавать элемент динамически, если вам это действительно не нужно! поэтому просто установите значение readonly с помощью 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> 

И вы в порядке!

Answer 2

У вас есть:

onkeyup="limiter()" 

Поскольку вы не вызывая limiter в контексте объекта, которому вы звоните window.limiter.

var form = this.parent; 

Так this является window и form является window.parent, который является таким же, как window (если документ не загружен в кадре).

Вы хотите, чтобы this контроль формы. Сделайте это, используя event binding в unobtrusive JavaScript.

(не использовать input как элемент исключительно для отображения вывода, это не имеет смысла. Возможно, вы хотите использовать ярлык, связанный с текстовым ... и использовать другую метку для <b>Comments</b><br />Please leave any comments that you think will help anyone else.)