为什么textContent不被替换，而是添加到当函数被点击?

Question

const passwordBoxLeft = document.getElementById('password-box--left');
const passwordBoxRight = document.getElementById('password-box--right');
let passwordLeft = [];
let passwordRight = [];
let passwordLength = 15;
function generatePassword() {
for (let i = 0; i < passwordLength; i++) {
let leftPW = characters[Math.floor(Math.random() * characters.length)];
let rightPW = characters[Math.floor(Math.random() * characters.length)];
passwordLeft.push(leftPW);
passwordRight.push(rightPW);
};
passwordBoxLeft.textContent = passwordLeft.join('');
passwordBoxRight.textContent = passwordRight.join('');
};

我有一个简单的前端密码发生器,characters数组并生成15随机字符数组,说把这个容器数组和这些数组显示为DOMtextContent。

一切都很好，但出于某种原因，我不明白如何用随机密码的新版本替换textContentdiv。相反，该函数的作用就好像我为textContent放置了一个+=，因此每次单击它时，它都会继续加入另外15个随机字符，而不是仅仅显示一组新的15个随机字符。这显然不是预期的行为。

我似乎不知道我到底做错了什么。

Answer 1

您正在使用.push()方法，该方法将一个或多个元素添加到Array的末尾。它将始终返回Array的新长度。

---

在你的例子中-.push()正在添加新生成的数组到先前修改的数组。

---

let passwordLeft = [];
let passwordRight = [];
let passwordLength = 15;
let characters = `abcdefghijklmnopqrstuvwxyz`;
function generatePassword() {
for (let i = 0; i < passwordLength; i++) {
let leftPW = characters[Math.floor(Math.random() * characters.length)];
let rightPW = characters[Math.floor(Math.random() * characters.length)];
passwordLeft[i] = leftPW;
passwordRight[i] = rightPW;
};
console.log(passwordLeft.join(""));
console.log(passwordRight.join(""));
}
generatePassword();