点击按钮为空白textarea填充默认邮箱仅触发一次的问题如何解决

• 操作textarea属性错误：textarea的实时用户输入内容存储在value属性中，你当前使用的textContent只能读取/修改元素初始化时的静态文本内容，不会跟随用户输入更新。第一次赋值后textContent就固定为默认邮箱，后续交互不会再改变这个属性的值，所以逻辑只会生效一次。
• 判断逻辑错误：需求是textarea为空时才填充默认值，现有代码的判断条件x.textContent != null刚好相反，且空textarea的textContent是空字符串而非null，判断条件本身不符合业务要求。

修改JS逻辑，改用value属性读写textarea内容，调整判断逻辑即可，修复后完整代码如下：

JS代码 #

const btn = document.getElementById('btn');
const textarea = document.getElementById('smth');

function putDefaultMail() {
  // 首尾去空格后判断是否为空，为空才填充默认邮箱
  if (textarea.value.trim() === '') {
    textarea.value = 'defaultmail@gmail.com';
  }
}

btn.addEventListener('click', function(e) {
  e.preventDefault();
  putDefaultMail();
});

可选优化 #

原HTML代码中按钮的文本Sumbit为拼写错误，可修正为Submit，不影响核心功能运行。

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