JavaScriptのテキストエリアの値を取得することができません

Question

私は自分のウェブページにN個のtextarea要素を置くことができ、ユーザが何かを入力しようとするたびにtextareaの値を取得したいと考えています。私は、コード

<textarea rows="10" cols="25"> 

     </textarea> 
     <textarea rows="10" cols="25"> 

     </textarea> 
     <textarea rows="10" cols="25"> 

     </textarea> 

を書き、スクリプトが

document.addEventListener('DOMContentLoaded', function(){ 
     var textareas = document.getElementsByTagName("textarea"); 
     console.log(textareas.length); 
     for(var i = 0; i<textareas.length; i++){ 
       textareas[i].onkeypress = function(){ 
        console.log(textareas[i].value); 
       } 
     } 
    }); 

ラインconsole.log(textareas.length);が値3を印刷しているが、console.log(textareas[i].value);がエラー私は意味

Uncaught TypeError: Cannot read property 'value' of undefined 

を投げている理由を私は理解していないですtextareas[i]が定義されていない場合は、なぜtextareas[i].onkeypressが正しく動作しているのですか？それが間違っている場合は、ユーザーが何かを書いたときにそれぞれのテキストエリアの価値をどのように得ることができますか？

Answer 1

document.addEventListener('DOMContentLoaded', function() { 
    var textareas = document.getElementsByTagName("textarea"); 
    for (var i = 0; i < textareas.length; i++) { 
     !function (textarea) { 
      textarea.onkeyup = function() { 
       console.log(textarea.value); 
      } 
     }(textareas[i]); 
    } 
}, false); 

Answer 2

ベストのEventListenerを持っており、いくつかの点で、削除したいと思うので、このとオブジェクト自体を割り当てます。

document.addEventListener('DOMContentLoaded', function(){ 
    var textareas = document.getElementsByTagName("textarea"); 
    console.log(textareas.length); 
    for(var i = 0; i<textareas.length; i++){ 
     textareas[i].addEventListener('keyup', function(){ 
      console.log(this.value); 
     }); 
    } 
}); 

Answer 3

そのあなたがそのテキストエリアをクリックすると、iの値は 3等しいとtextaresであるため、[3]は未定義です。

したがって、このエラーが発生します。

e.target.valueを使用して解決できます。

textareas[i].onkeypress = function (e){ 
        console.log(e.target.value); 
} 

Answer 4

は、あなたがそれを実行したときに、あなたonkeypressではハンドラを定義してからスコープの変更は、ブラウザはもはやtextareas[i]が何であるかを知らないので。あなたは次のようにあなたのハンドラにそれをバインドする必要があります。

document.addEventListener('DOMContentLoaded', function(){ 
 
     var textareas = document.getElementsByTagName("textarea"); 
 
     console.log(textareas.length); 
 
     for(var i = 0; i<textareas.length; i++){ 
 
       textareas[i].onkeypress = function(){ 
 
        console.log(this.value); 
 
       }.bind(textareas[i]) 
 
     } 
 
    });

<textarea rows="10" cols="25"> 
 

 
     </textarea> 
 
     <textarea rows="10" cols="25"> 
 

 
     </textarea> 
 
     <textarea rows="10" cols="25"> 
 

 
     </textarea>

バインドはトリッキーなものですが、それは長期的には非常に多くの落とし穴を解決する学習：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

---

また、コードに入力された最後の文字がそのまま残っていることがわかります。これは、キーアップではなく、キー入力時（エントリ前）にハンドラが起動したためです。あまりにも、最後の文字をキャプチャするために、以下を試してみてください：それは働いていない

document.addEventListener('DOMContentLoaded', function(){ 
 
     var textareas = document.getElementsByTagName("textarea"); 
 
     console.log(textareas.length); 
 
     for(var i = 0; i<textareas.length; i++){ 
 
       textareas[i].addEventListener('keyup', function(event) { 
 
        console.log(this.value); 
 
       }); 
 
     } 
 
    });

<textarea rows="10" cols="25"> 
 

 
     </textarea> 
 
     <textarea rows="10" cols="25"> 
 

 
     </textarea> 
 
     <textarea rows="10" cols="25"> 
 

 
     </textarea>

Answer 5

、あなたは内部機能のi外を定義しているため。 iはtextareas.length + 1であり、現在のテキストエリアではありません。あなたは何ができるか は次のとおりです。

document.addEventListener('DOMContentLoaded', function(){ 
     var textareas = document.getElementsByTagName("textarea"); 
     console.log(textareas.length); 
     for(var i = 0; i<textareas.length; i++){ 
       textareas[i].onkeypress = function(){ 
       //i is 4, so we have to use `this`: 
       console.log(this.value) 
       // console.log(textareas[i].value); 
       } 
     } 
    });