如何实现点击按钮时重置并重新生成两个随机密码？

原代码的问题在于每次点击生成按钮时，都是把新字符追加到已有密码后面，而不是替换掉旧密码——因为用了+=拼接textContent，没有先清空原有内容。

两种修复方案 #

方案1：快速修改——先清空再生成

在循环生成字符前，先把两个密码显示元素的内容清空：

const characters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "-", "+", "=", "{", "[", "}", "]", ",", "|", ":", ";", "<", ">", ".", "?", "/"];

let generateButton = document.querySelector("#generateButton")
let randomPassOne = document.querySelector("#randomPassOne")
let randomPassTwo = document.querySelector("#randomPassTwo")

generateButton.addEventListener("click", function () {
    // 清空旧密码
    randomPassOne.textContent = "";
    randomPassTwo.textContent = "";
    
    for (let i = 0; i < 15; i++) {
        let randomOne = Math.floor(Math.random() * characters.length)
        let randomTwo = Math.floor(Math.random() * characters.length)
        passOne = characters[randomOne]
        passtwo = characters[randomTwo]
        randomPassOne.textContent += passOne
        randomPassTwo.textContent += passtwo
    }
})

方案2：更优写法——先构建字符串再赋值

减少DOM操作次数（频繁修改textContent会触发多次重绘），先在内存中拼接完整密码，最后一次性更新：

const characters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "_", "-", "+", "=", "{", "[", "}", "]", ",", "|", ":", ";", "<", ">", ".", "?", "/"];

let generateButton = document.querySelector("#generateButton")
let randomPassOne = document.querySelector("#randomPassOne")
let randomPassTwo = document.querySelector("#randomPassTwo")

generateButton.addEventListener("click", function () {
    let passOne = "";
    let passTwo = "";
    
    for (let i = 0; i < 15; i++) {
        passOne += characters[Math.floor(Math.random() * characters.length)];
        passTwo += characters[Math.floor(Math.random() * characters.length)];
    }
    
    // 一次性替换旧内容
    randomPassOne.textContent = passOne;
    randomPassTwo.textContent = passTwo;
})

为什么原代码会失败？ #

textContent += xxx等价于textContent = textContent + xxx，每次点击都会把新字符拼在旧密码后面，自然不会重置。只要在生成新密码前清空内容，或者直接用新字符串覆盖旧内容，就能解决问题。

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