Javascript event listener behavior

Question

I added a listener to an unordered list to perform a function when a text area element within the ul was changed. When the text area is changed, I wanted to get the value of the now changed text area, and save it. When I try to save the value in newNotes, I am given back the INITIAL value of the text area, not the value after the text area has been changed. Isn't that the whole point of the listener, to be triggered upon a change?

ul.addEventListener('change',(e)=> { 
if(e.target.tagName === "TEXTAREA") { // if the ul was changed and a textarea was targeted
    const li = e.target.parentNode; // the parent list item of the text area
    const liName = li.firstChild.textContent; // this is a string
    var newNotes = e.target.textContent; // PROBLEM : RETURNS WRONG VALUE
    console.log(newNotes);
    updateNotesTo(liName, newNotes); // regarding localStorage         

}              
});

charlietfl · Accepted Answer · 2018-05-20 22:52:48Z

1

You want the value from textarea

Change

var newNotes = e.target.textContent;

To

var newNotes = e.target.value;

answered May 20, 2018 at 22:52

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew L · Accepted Answer · 2018-05-20 23:21:17Z

0

You have to use the .value attribute.

var newNotes = e.target.value;

See also, Textarea.textcontent is not changing

edited May 20, 2018 at 23:21

Andrew L

5,5161 gold badge29 silver badges40 bronze badges

answered May 20, 2018 at 23:05

Arber

5611 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

Javascript event listener behavior

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related