求助：JavaScript获取textarea值并forEach循环打印控制台异常

问题原因 #

你代码里的textAreaSplit是在函数初始化时就生成的数组，当时textarea的内容大概率是空的，所以这个数组要么是空的，要么只有空白字符。而input事件触发时，你循环的始终是这个初始的旧数组，并没有去读取用户输入后的最新内容，自然会打印空白或undefined。

修复代码 #

把获取最新内容并拆分的逻辑移到input事件的回调函数内部，这样每次用户输入时都会重新获取当前textarea的内容：

function someSample() {
    let textAreaTag = document.getElementById('textAreaId');
    
    textAreaTag.addEventListener('input', () => {
        let textAreaVal = textAreaTag.value;
        let textAreaSplit = textAreaVal.split('');
        textAreaSplit.forEach((val, ind) => {
            console.log(val);
        });
    }); 
}   

someSample();

可选优化 #

如果只是要遍历每个字符，也可以直接操作字符串，省去拆分数组的步骤：

function someSample() {
    let textAreaTag = document.getElementById('textAreaId');
    
    textAreaTag.addEventListener('input', () => {
        const text = textAreaTag.value;
        // 用扩展运算符转数组后遍历
        [...text].forEach(char => console.log(char));
        
        // 或者用for...of循环
        // for (const char of text) {
        //     console.log(char);
        // }
    }); 
}   

someSample();

内容的提问来源于stack exchange，提问作者Aniket