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

Question

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

Этокод 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

У вас есть:

onkeyup="limiter()"

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

var form = this.parent;

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

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

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

Answer 2

Будет ли это работать для вас? Пример ссылки

РЕДАКТИРОВАТЬ:
Вы должны передать экземпляр элемента с помощью вызова функции 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>

И все готово!