私のテキストエリアを見つけるためにdocument.getElementById（）を得ることができません

Question

多分私は自分のサイトで長い間働いていましたが、私は以下の作業をすることができません。テキストエリアをチェックしてボックス内のテキストを制限するはずのlimiterと呼ばれる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; 
} 

本当に必要がなければ、要素を動的に作成する必要はありません。だからちょうど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と同じである、window.parentあります。

thisをフォームコントロールにしたいとします。 event bindingをunobtrusive JavaScriptに設定してください。

（そしてもっぱら出力を表示するための要素としてinputを使用していない、それはおそらく、テキストエリアに関連付けられたラベルを使用したい。意味がない...と<b>Comments</b><br />Please leave any comments that you think will help anyone else.ために別のラベルを使用する）