在textarea输入内容后点击按钮，alert弹窗为何显示为空？

核心问题有两个： #

• 提前获取内容导致值无法更新：你在页面加载时就把source赋值为textarea的内容，此时textarea是空的，后续无论输入什么内容，source都会保持最初的空字符串状态。
• 用错了获取输入内容的属性：textarea的用户输入内容存储在value属性中，textContent是用来获取元素自身的文本节点内容，并非表单输入值的正确获取方式。

修正后的代码 #

JavaScript代码：

document.querySelector('button').addEventListener('click', function() {
  // 每次点击时才读取当前textarea的实时输入值
  const source = document.querySelector('textarea#source').value;
  alert(source);
});

如果想提前缓存textarea元素，避免重复查询DOM，也可以这么写：

// 提前获取textarea元素，减少DOM查询次数
const textarea = document.querySelector('textarea#source');
  
document.querySelector('button').addEventListener('click', function() {
  alert(textarea.value);
});

HTML代码（无需修改）：

<textarea id="source" rows="25"></textarea>
<button>click me</button>

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