JavaScript点击生成新随机密码，避免旧密码追加问题求助

问题出在两个核心点：

• 全局变量passwordOne和passwordTwo每次调用生成函数时，会用+=持续追加字符，旧密码一直留存
• 给DOM元素赋值时使用textContent +=，导致新密码直接追加在旧内容末尾

修改方案一：重置全局变量并直接赋值 #

在每次生成密码前，先清空全局密码变量，同时给DOM元素赋值时改用直接赋值（而非追加）：

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 passwordOne = "";
let passwordTwo = "";

let generateBtn = document.getElementById("generate-btn");
let firstPasswordEl = document.getElementById("first-password-el");
let secondPasswordEl = document.getElementById("second-password-el");

function generate() {
    // 重置密码变量为空
    passwordOne = "";
    passwordTwo = "";
    
    randomOne();
    // 直接替换文本内容，而非追加
    firstPasswordEl.textContent = passwordOne;
    
    randomTwo();
    secondPasswordEl.textContent = passwordTwo;
};

function randomOne() {
    for (let i = 0; i < 16; i++) {
        let character = Math.floor(Math.random() * characters.length);
        passwordOne += characters[character];
    }
};

function randomTwo() {
    for (let i = 0; i < 16; i++) {
        let character = Math.floor(Math.random() * characters.length);
        passwordTwo += characters[character];
    }
};

修改方案二：封装通用生成函数（更简洁） #

把密码生成逻辑封装成独立函数，变量放在函数内部，避免全局累加问题，同时减少重复代码：

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 generateBtn = document.getElementById("generate-btn");
let firstPasswordEl = document.getElementById("first-password-el");
let secondPasswordEl = document.getElementById("second-password-el");

function generate() {
    // 直接调用生成函数并替换文本
    firstPasswordEl.textContent = generateRandomPassword();
    secondPasswordEl.textContent = generateRandomPassword();
};

// 通用密码生成函数，每次调用都会生成全新密码
function generateRandomPassword() {
    let password = "";
    for (let i = 0; i < 16; i++) {
        let characterIndex = Math.floor(Math.random() * characters.length);
        password += characters[characterIndex];
    }
    return password;
};

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