所以这段代码应该生成一个随 secret 码......几乎只是一堆随机字符。除了密码无法在 HTML 中正确显示之外，它似乎可以正常工作。
该代码应该询问您想要多少个字符，然后询问您是否想要大写字母和数字。所有步骤都记录在控制台中，因此我知道它正确生成。
var generateBtn = document.querySelector("#generate");
var 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"];
var upperChars = ["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"
];
var characterNum = ["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"
];
var upperNum = ["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"
];
// Write password to the #password input
function writePassword() {
var password = generatePassword();
var passwordText = document.querySelector("#password");
passwordText.value = password
}
// Add event listener to generate button
generateBtn.addEventListener("click", writePassword);
function generatePassword() {
var charLength = prompt("How many characters do you want in your new password?");
var whichCase = confirm("Do you want uppercase letters?");
var num = confirm("Do you want numbers in your password?");
console.log(charLength);
console.log(whichCase);
console.log(num);
// if uppercase and numbers are confirmed
if (num === true && whichCase === true) {
for (var i = 0; i < charLength; i++) {
charPick = upperNum[Math.floor(Math.random() * upperNum.length)];
console.log(charPick);
password = password.toString() + charPick.toString();
console.log(password);
}
}
//if uppercase but no numbers
else if (num != true && whichCase === true) {
for (var i = 0; i < charLength; i++) {
charPick = upperChars[Math.floor(Math.random() * upperChars.length)];
console.log(charPick);
password = password.toString() + charPick.toString();
console.log(password);
}
}
// numbers no uppercase
else if (num === true && whichCase != true) {
for (var i = 0; i < charLength; i++) {
charPick = characterNum[Math.floor(Math.random() * characterNum.length)];
console.log(charPick);
password = password.toString() + charPick.toString();
console.log(password);
}
} else if (num != true && whichCase != true) {
for (var i = 0; i < charLength; i++) {
charPick = characters[Math.floor(Math.random() * characters.length)];
console.log(charPick);
password = password.toString() + charPick.toString();
console.log(password);
}
}
return password;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Password Generator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<header>
<h1>Password Generator</h1>
</header>
<div class="card">
<div class="card-header">
<h2>Generate a Password</h2>
</div>
<div class="card-body">
<textarea readonly id="password" placeholder="Your Secure Password" aria-label="Generated Password"></textarea>
</div>
<div class="card-footer">
<button id="generate" class="btn">Generate Password</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>最佳答案
您在函数中使用密码而没有定义它。它正在获取一些 DOM 对象作为密码的值，即带有 id 密码的元素，但是如果您在生成密码函数的开头使用 let 定义一个局部变量作为密码，那么一切都可以正常工作。
var generateBtn = document.querySelector("#generate");
var 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"];
var upperChars = ["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"];
var characterNum = ["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"];
var upperNum = ["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"];
// Write password to the #password input
function writePassword() {
var password = generatePassword();
var passwordText = document.querySelector("#password");
passwordText.value= password
}
// Add event listener to generate button
generateBtn.addEventListener("click", writePassword);
function generatePassword(){
var charLength = prompt("How many characters do you want in your new password?");
var whichCase = confirm("Do you want uppercase letters?");
var num = confirm("Do you want numbers in your password?");
// This creates a local variable for the password instead of getting the DOM object with id="password"
let password = '';
console.log(charLength);
console.log(whichCase);
console.log(num);
// if uppercase and numbers are confirmed
if(num === true && whichCase === true){
for(var i = 0; i <charLength; i++){
charPick = upperNum[Math.floor(Math.random()*upperNum.length)];
console.log(charPick);
password = password.toString()+charPick.toString();
console.log(password);
}
}
//if uppercase but no numbers
else if(num != true && whichCase === true){
for(var i = 0; i <charLength; i++){
charPick = upperChars[Math.floor(Math.random()*upperChars.length)];
console.log(charPick);
password = password.toString()+charPick.toString();
console.log(password);
}
}
// numbers no uppercase
else if(num === true && whichCase != true){
for(var i = 0; i <charLength; i++){
charPick = characterNum[Math.floor(Math.random()*characterNum.length)];
console.log(charPick);
password = password.toString()+charPick.toString();
console.log(password);
}
}
else if(num != true && whichCase != true){
for(var i = 0; i <charLength; i++){
charPick = characters[Math.floor(Math.random()*characters.length)];
console.log(charPick);
password = password.toString()+charPick.toString();
console.log(password);
}
}
return password;
}<button id="generate">Generate</button>
<input type="text" id="password">关于javascript - 与 Javascript 中的密码生成器苦苦挣扎。无法正确更改页面上的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62418929/