javascript - 无法获取javascript中textarea的值

This question already has answers here:

JavaScript closure inside loops – simple practical example
                                
                                    （44个回答）
                                
                        
                3年前关闭。
            
        

所以我可以说我的网页中有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正常工作。如果这是错误的方法，当用户在上面写一些东西时，如何获取相应文本区域的值。

最佳答案

最好有一个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);
        });
    }
});