ループによって追加されたイベントリスナーの後にこのノード値を取得します

Question

私はいくつかのテキストエリアを持ち、各テキストエリアにイベントリスナーを追加したいとします。私がテキストエリア内に入力すると、その内部に入力された値をコンソール化する必要があります。イベントリスナーが追加されたときにループで呼び出される各テキストエリアに「this」をどのように参照するかを理解できません。以下のコードは、ブラウザコンソールで「未定義」となります。たぶんあなたはそれを正しく設定することができます。ヘルプを飾った。どうもありがとうございました。

window.addEventListener("load", function(){ 
    var char_max_inputs = document.querySelectorAll('.char_max'); 
    for (var i = 0; i < char_max_inputs.length; i++){ 
     var max_char = char_max_inputs[i].getAttribute("max_char"); 
     var counter_id = char_max_inputs[i].getAttribute("counter_id");  
     char_max_inputs[i].addEventListener("keyup", function(){count_char(counter_id, max_char);}, false); 
    } 
}); 

function count_char(counter_id, max_char) { 
    console.log(this.value); 
} 

Answer 1

あなたは正しくについて読んでいない場合は、JavaScriptで非常に混乱することができFunction.prototype.bind

window.addEventListener("load", function() { 
 
    var char_max_inputs = document.querySelectorAll('.char_max'); 
 
    for (var i = 0; i < char_max_inputs.length; i++) { 
 
    var max_char = char_max_inputs[i].getAttribute("max_char"); 
 
    var counter_id = char_max_inputs[i].getAttribute("counter_id"); 
 
    char_max_inputs[i].addEventListener("keyup", count_char.bind(char_max_inputs[i], counter_id, max_char), false); 
 
    } 
 
}); 
 

 
function count_char(counter_id, max_char) { 
 
    console.log(this.value); 
 
}

<textarea class="char_max"></textarea> 
 
<textarea class="char_max"></textarea> 
 
<textarea class="char_max"></textarea>

thisを使用して、このようにそれを解決することができます。それを理解するための優れたリソースはhere

UPDATE

としては、コールを使用して、コメントでの例を指摘し、不完全であった、一緒に結合されます。それを取り除く。