JS密码生成器点击触发函数时textContent未替换反而追加内容的原因

该异常和textContent的赋值逻辑无关，问题出在密码存储变量的作用域设置错误：

• 你将passwordLeft、passwordRight两个数组定义在了generatePassword函数的外部，属于全局生命周期的变量，页面加载完成后只会初始化一次为空数组
• 每次触发函数执行时，代码没有清空两个数组的历史内容，直接通过push()往数组里追加15个新字符，数组长度会随点击次数递增：首次点击长度为15，第二次为30，第三次为45……最终join('')拼接出的字符串长度持续增长，呈现出类似+=追加内容的效果
• element.textContent = 字符串本身是全量替换节点文本的逻辑，不存在自动追加内容的行为，不需要怀疑DOM API的实现问题

优先选择把临时存储密码的变量移到函数内部，每次函数执行时会自动创建全新的空数组，从根源上避免历史数据残留：

const passwordBoxLeft = document.getElementById('password-box--left');
const passwordBoxRight = document.getElementById('password-box--right');
const passwordLength = 15;

function generatePassword() {
  // 临时变量放在函数内部，每次调用重新初始化
  const passwordLeft = [];
  const passwordRight = [];
  for (let i = 0; i < passwordLength; i++) {
    const leftPW = characters[Math.floor(Math.random() * characters.length)];
    const rightPW = characters[Math.floor(Math.random() * characters.length)];
    passwordLeft.push(leftPW);
    passwordRight.push(rightPW);
  }

  passwordBoxLeft.textContent = passwordLeft.join('');
  passwordBoxRight.textContent = passwordRight.join('');
}

如果你不想调整变量作用域，也可以在循环执行前手动清空两个数组的内容，效果一致：

function generatePassword() {
  // 手动清空历史数据
  passwordLeft.length = 0;
  passwordRight.length = 0;
  // 原有循环、字符生成、push、DOM赋值逻辑保持不变即可
}

排查提示：后续遇到DOM渲染内容不符合预期的问题，先打印你要赋值给DOM的数据源做校验，能快速定位是数据源问题还是DOM操作逻辑问题。

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