为ul绑定change监听后，获取textarea值为何是初始值而非修改后的值？

嘿，我懂你碰到的这个麻烦了——这其实是个很容易踩的DOM小坑！

问题根源 #

你现在用e.target.textContent去拿textarea的内容，但textarea的用户输入内容并不会同步更新它的textContent属性。textContent存储的是这个textarea元素在初始渲染时的文本内容，不管用户怎么输入，它都不会跟着变。而用户实时输入的内容，其实是存在textarea的value属性里的。

修复后的代码 #

把获取内容的那行代码改成用value就行：

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.value; // 这里改成value！
    console.log(newNotes); 
    updateNotesTo(liName, newNotes); // regarding localStorage 
  } 
});

额外小提示 #

如果你希望在用户输入的实时（而不是失去焦点时）就触发函数，可以把change事件换成input事件，这样每一次用户输入、删除内容都会立刻触发监听函数，体验会更流畅。

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