如何使用click eventListener回调函数修改全局变量passLength？

你在所有长度选择按钮的点击回调函数中，都使用了let passLength = xxx的写法，这会在回调的局部作用域内重新声明一个同名局部变量，赋值操作只会作用在这个局部变量上，完全不会修改外层的全局passLength变量。回调内部打印的是局部变量所以值符合预期，但全局变量自始至终没有被修改，因此生成密码时依然取默认值16。

删除所有按钮点击回调里的let关键字，直接对全局passLength变量赋值即可，事件回调的返回值无实际作用可直接删除，修改后的JS代码如下：

let passLength = 16; // 默认密码长度，可通过按钮修改

document.getElementById('btn8').addEventListener('click', function(){
    passLength = 8;
    console.log(passLength)
});
document.getElementById('btn16').addEventListener('click', function(){
    passLength = 16;
    console.log(passLength)
});
document.getElementById('btn20').addEventListener('click', function(){
    passLength = 20;
    console.log(passLength)
});
document.getElementById('btn24').addEventListener('click', function(){
    passLength = 24;
    console.log(passLength)
});

function randomString(passLength){
    var randomPassword = '';
    var characters = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-=+?!$/><)(%&*'
    for(var i = 0; i < passLength; i++){
        randomPassword += characters.charAt(Math.floor(Math.random() * characters.length))
    };
    console.log(randomPassword)
    return randomPassword;
};

document.getElementById('btn').addEventListener('click', function(){
    document.getElementById('string').textContent = randomString(passLength);
});

可以批量绑定所有长度选择按钮的事件，避免重复冗余的代码，后续新增长度按钮只需添加slctBtn类即可自动生效：

// 替换所有长度按钮的单独事件绑定逻辑
document.querySelectorAll('.slctBtn').forEach(btn => {
  btn.addEventListener('click', () => {
    passLength = Number(btn.textContent)
    console.log(passLength)
  })
})

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