JavaScript密码生成器点击仅首次生效问题排查咨询

问题原因 #

你的代码里len是全局变量，首次点击生成密码后，len会被设为10。后续再点击按钮时，while(len<10)的条件不成立，循环完全不会执行——虽然你每次点击都重置了password=''，但没有新字符被添加，所以输入框只会显示空值。

关于你问的password=''执行顺序：它确实是在while循环之前执行的，这个没问题，问题出在len没有被重置。

解决方法 #

有两种简单的修复方式：

方式1：每次点击重置len为0

在点击事件里把全局变量len重新赋值为0，让循环能重新执行：

const btn=document.querySelector('.btn');
let password='',len=0;
const upper='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lower='abcdefghijklmnopqrstuvwxyz';
const number='0123456789';
const symbol='@#$%^()_+|{}[]<>/-=';
const all=[...upper,...lower,...number,...symbol];

btn.addEventListener('click',()=>{
    password='';
    len=0; // 新增：重置len为0
    while(len<10){
        password += all[Math.floor(Math.random() * all.length)];
        len=password.length;
    }
    document.querySelector('.box').value=password;
})

方式2：抛弃len变量，直接循环固定次数

用for循环替代while，直接生成10位字符，避免全局变量带来的问题，代码更简洁：

const btn=document.querySelector('.btn');
let password='';
const upper='ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const lower='abcdefghijklmnopqrstuvwxyz';
const number='0123456789';
const symbol='@#$%^()_+|{}[]<>/-=';
const all=[...upper,...lower,...number,...symbol];

btn.addEventListener('click',()=>{
    password='';
    for(let i=0; i<10; i++){ // 直接循环10次
        password += all[Math.floor(Math.random() * all.length)];
    }
    document.querySelector('.box').value=password;
})

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