Get TextArea Input Value in form of array and forEach loop the value in console.log Using Javascript

Question

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

someSample();

There is on textarea input field, so first i gave a addEventListener while typing any text in textarea the value of text area text should get forEach Loop and the loop array should show inside console.log.. But now the loop array is showing blank or undefined.

Answer 1

All you need to do is move 2 lines of code.

someSample is getting the initial value of the textarea, which will be an empty string. Then it is adding an event listener, which will fire every time the input changes in the text area. The problem is that you're not updating textAreaVal with every input change, and you're simply using the initial empty string. On input change, you need to get the value, split the value, then loop through. someSample should look like this:

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);
        });
    }); 
}