我正在创建一个密码生成器，并在javascript上遇到了一些麻烦

Question

当我单击提交按钮以及选中复选框中的框时，我不确定如何让事件侦听器工作。有人可以看看我的代码并使用香草 javascript 分解事情吗，我是完全陌生的。这是我到目前为止得到的：

var lowercase = ["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"];
var uppercase = ["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"];
var numbers = ["0","1","2","3","4","5","6","7","8"];
var symbols = ["!","@","#","$","%","^","&","*"];
var passwordLength = document.getElementById("length");
var submitElt = document.getElementById("submit");
var textDisplayElt = document.getElementById("display");

submitElt.addEventListener("click",function () {
})


function generatePassword(passwordLength) {
var password = "";
for(var i = 0; i < passwordLength; ++i){
var length = lowercase.length;
var lowerLetters = Math.floor(Math.random() * length);
var lower = lowercase[lowerLetters];
password = password + lower; 
};
for(var i = 0; i < passwordLength; ++i){
var length = uppercase.length;
var upperLetters = Math.floor(Math.random() * length);
var upper = uppercase[upperLetters];
password = password + upper; 
};
for(var i = 0; i < passwordLength; ++i){
var length = numbers.length;
var randomNumbers = Math.floor(Math.random() * length);
var nums = numbers[randomNumbers];
password = password + nums; 
};
for(var i = 0; i < passwordLength; ++i){
var length = symbols.length;
var symbolsGen = Math.floor(Math.random() * length);
var sym = symbols[symbolsGen];
password = password + sym; 
} 

return password
}
var passwordLength = 20;
var password = generatePassword(passwordLength);

Answer 1

这应该可以解决问题

var lowercase = ["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"];
var uppercase = ["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"];
var numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
var symbols = ["!", "@", "#", "$", "%", "^", "&", "*"];
document.getElementById("submit").addEventListener("click", function(){
var passwordLength = Number(document.getElementById("length").value.replace(/D/g, ""));
document.getElementById("display").innerHTML = generatePassword(passwordLength);
});
function generatePassword(passwordLength){
var password = "";
for(var i = 0; i < passwordLength; i++){
var random = Math.random();
if(random < .25){
password += lowercase[Math.floor(Math.random() * lowercase.length)];
}
else if(random < .5){
password += uppercase[Math.floor(Math.random() * uppercase.length)];
}
else if(random < .75){
password += numbers[Math.floor(Math.random() * numbers.length)];
}
else{
password += symbols[Math.floor(Math.random() * symbols.length)];
}
}
return password;
}

只要你的HTML元素看起来像这样：

<input type="number" id="length"/>
<button id="submit">Generate Password</button>
<div id="display"></div>

Answer 2

不久前创建了一个小提琴，因为我每次都为测试生成新密钥而感到厌倦。这是该 https://jsfiddle.net/vikasbhandari2/48bzhpmw/47/的路径

或者，您可以使用以下清理技巧生成随机字符串。这是生成随机字符串的一种非常有效的方法，我在 prod 中大量使用它。

(new Date().getTime() + Math.floor(Math.random() * 100000)).toString(36)