Question

所以我可以在我的网页中说出N textarea元素，并且每当用户尝试输入内容时，我想获得textarea的值。我写了代码

var layout = {
    rect: new Phaser.Rectangle(0, 0, 200, 200)
};

for(var i in layout) {
    layout[i].kill();
    layout[i].remove();
}

，脚本是

<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); } } });正在打印值3，但我不明白为什么console.log(textareas.length);会抛出错误

console.log(textareas[i].value);

我的意思是如果没有为Uncaught TypeError: Cannot read property 'value' of undefined定义，那么为什么textareas[i]正常工作。如果这是错误的方式，当用户在其上写东西时，如何获得相应textarea的值。

Answer 1

最好有一个 EventListener ，并使用 this 指定对象本身，因为在某些时候你想删除。

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 2

因为当你点击那个textarea时，i的值等于3。和textares [3]未定义。

因此它抛出了这个错误。

您可以使用e.target.value解决这个问题。

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

Answer 3

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 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>

Bind是一个棘手的问题，但从长远来看，学习它会解决很多陷阱：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

此外，您会发现您错过了使用您的代码输入的最后一个字符。这是因为处理程序在keydown（在条目之前）触发而不是keyup。请尝试以下操作来捕获最后一个字符：

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，而不是当前的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 (){
                //i is 4, so we have to use `this`:
                console.log(this.value)
                // console.log(textareas[i].value);
                }
        }
    });

无法在javascript中获取textarea的值

5 个答案: