随机密码生成器 Javascript 不工作
Random Password Generator Javascript not working
我正在尝试创建一个随机密码生成器,要求用户输入 8-128 个字符,然后确认使用大写、小写、符号和/或数字。我正在尝试获取密码以在文本区域生成和打印,我知道我遗漏了一些东西,但我不确定是什么。我为粗略的代码道歉。我才刚刚开始。
var plength = prompt("How many characters would you like your password to be?")
if (plength < 8 || plength > 128){
alert("Length must be 8-128 characters")
}
if (plength >= 8 && plength <= 128){
var cuppercase = confirm("Would you like to use uppercase letters?")
var clowercase = confirm("Would you like to use lowercase letters?")
var cnumbers = confirm("would you like to use numbers?")
var csymbols = confirm("would you like to use special characters?")
}
if (cuppercase != true && clowercase != true && cnumbers != true && csymbols != true){
alert("You must select at least one character type!")
}
//DOM elements
const resultEl = document.getElementById('password');
document.getElementById('generate').addEventListener('click', () => {
const hasLower = clowercase.true;
const hasUpper = cuppercase.true;
const hasNumber = cnumbers.true;
const hasSymbol = csymbols.true;
resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});
const randomFunc = {
lower: getRandomLower,
upper: getRandomUpper,
number: getRandomNumber,
symbol: getRandomSymbol
}
document.getElementById('clipboard').addEventListener('click', () => {
const textarea = document.createElement('textarea');
const password = resultEl.innerText;
if(!password) { return; }
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
alert('Password copied to clipboard');
});
function generatePassword(lower, upper, number, symbol, length) {
let generatedPassword = '';
const typesCount = lower + upper + number + symbol;
const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]);
// create a loop
for(let i=0; i<length; i+=typesCount) {
typesArr.forEach(type => {
const funcName = Object.keys(type)[0];
generatedPassword += randomFunc[funcName]();
});
}
const finalPassword = generatedPassword.slice(0, length);
return finalPassword;
}
// Generator functions
function getRandomLower() {
return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
function getRandomUpper() {
return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
function getRandomNumber() {
return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}
function getRandomSymbol() {
const symbols = '!@#$%^&*(){}[]=<>/,.'
return symbols[Math.floor(Math.random() * symbols.length)];
}
<header>
<h1 class="text-center" style= "margin-top: 20px;">Password Generator</h1>
</header>
<div class="card shadow-sm p-3 mb-5 bg-white rounded" style="max-width: 60%; margin: 40px auto;">
<div class="card-body">
<h2 class="card-title">Generate a Password</h2>
<textarea
style= "width: 100%; text-align:center; resize:none; border: dashed 2px lightgrey; margin:30px auto; padding: 10px auto; min-height: 100px;"
readonly
id="password"
placeholder="Your Secure Password"
aria-label="Generated Password"
></textarea>
<button type="button" class="btn btn-danger" id= "generate" style= "float:left; border-radius:40px; padding-right: 30px; padding-left: 30px;">Generate Password</button>
<button type="button" class="btn btn-light" id= "clipboard" style= "float:right; border-radius:40px; padding-right: 30px; padding-left: 30px; background-color: silver; color:white">Copy to clipboard</button>
</div>
</div>
好的,我在你的代码中发现了两个问题
您未在本节中定位来自 JS 的 generate
id
generate.addEventListener('click', () => {
const hasLower = clowercase.true;
const hasUpper = cuppercase.true;
const hasNumber = cnumbers.true;
const hasSymbol = csymbols.true;
resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});
所以您可以简单地将其转换为 document.getElementById('generate').addEventListener(...)
clipboard
也是如此,所以如果你解决了这个问题,我认为你就可以开始了。
更新:
我一直在提到与这个问题类似的问题,所以我想我应该写一些更简洁的代码让他们在这里看到:
var length = Number(prompt("How many characters would you like your password to be?"));
while (isNaN(length) || length < 8 || length > 128) length = Number(prompt("Length must be 8-128 characters. How many characters would you like your password to be?"));
var uppers = confirm("Would you like to use uppercase letters?");
var lowers = confirm("Would you like to use lowercase letters?");
var numbers = confirm("Would you like to use numbers?");
var symbols = confirm("Would you like to use special characters?");
while (!uppers && !lowers && !numbers && !symbols) {
alert("You must select at least one character type!");
uppers = confirm("Would you like to use uppercase letters?");
lowers = confirm("Would you like to use lowercase letters?");
numbers = confirm("Would you like to use numbers?");
symbols = confirm("Would you like to use special characters?");
}
window.addEventListener('load', function() {
generateNewPassword();
});
function generateNewPassword() {
var password = "";
var allowed = {};
if (uppers) password += rando(allowed.uppers = "QWERTYUIOPASDFGHJKLZXCVBNM");
if (lowers) password += rando(allowed.lowers = "qwertyuiopasdfghjklzxcvbnm");
if (numbers) password += rando(allowed.numbers = "1234567890");
if (symbols) password += rando(allowed.symbols = "!@#$%^&*(){}[]=<>/,.");
for (var i = password.length; i < length; i++) password += rando(rando(allowed).value);
document.getElementById("password").value = randoSequence(password).join("");
}
<script src="https://randojs.com/1.0.0.js"></script>
<input type="text" id="password"/>
<button onclick="generateNewPassword();">Generate new password</button>
我使用 randojs.com 使随机性变得简单易读,就像我在最初对这个问题的回答中所做的那样。如果您需要解释,请访问该站点。只需添加:
<script src="https://randojs.com/1.0.0.js"></script>
在你的 head 标签中可以使用 randojs 函数。
旧答案:
您漏掉了一些分号。您应该等到页面加载通过包装访问元素:
window.addEventListener('load', function (){
});
您应该获取文本区域的值,而不是其内部文本。我还在开头为 prompts/confirms 添加了循环,以强制用户重试,直到他们提供有效输入。除此之外,我只是稍微清理了一下格式。我使用 randojs.com 使随机性更易于阅读。如果您需要解释,请访问该站点。我刚刚添加了这个:
<script src="https://randojs.com/1.0.0.js"></script>
在您的 head 标签中,以便能够使用 randojs 函数。如果您有任何问题,请告诉我。
window.addEventListener('load', function() {
var plength = prompt("How many characters would you like your password to be?");
while (plength < 8 || plength > 128) {
plength = prompt("Length must be 8-128 characters. How many characters would you like your password to be?");
}
var cuppercase = confirm("Would you like to use uppercase letters?");
var clowercase = confirm("Would you like to use lowercase letters?");
var cnumbers = confirm("would you like to use numbers?");
var csymbols = confirm("would you like to use special characters?");
while (!(cuppercase || clowercase || cnumbers || csymbols)) {
alert("You must select at least one character type!");
cuppercase = confirm("Would you like to use uppercase letters?");
clowercase = confirm("Would you like to use lowercase letters?");
cnumbers = confirm("would you like to use numbers?");
csymbols = confirm("would you like to use special characters?");
}
//DOM elements
const resultEl = document.getElementById('password');
document.getElementById('generate').addEventListener('click', () => {
resultEl.value = generatePassword(clowercase, cuppercase, cnumbers, csymbols, plength);
});
document.getElementById('clipboard').addEventListener('click', () => {
const textarea = document.createElement('textarea');
const password = resultEl.value;
if (!password) {
return;
}
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
alert('Password copied to clipboard');
});
});
const randomFunc = {
lower: getRandomLower,
upper: getRandomUpper,
number: getRandomNumber,
symbol: getRandomSymbol
};
function generatePassword(lower, upper, number, symbol, length) {
let generatedPassword = '';
const typesCount = lower + upper + number + symbol;
const typesArr = [{
lower
}, {
upper
}, {
number
}, {
symbol
}].filter(item => Object.values(item)[0]);
// create a loop
for (let i = 0; i < length; i += typesCount) {
typesArr.forEach(type => {
const funcName = Object.keys(type)[0];
generatedPassword += randomFunc[funcName]();
});
}
const finalPassword = generatedPassword.slice(0, length);
return finalPassword;
}
// Generator functions
function getRandomLower() {
return rando("qwertyuiopasdfghjklzxcvbnm")
}
function getRandomUpper() {
return rando("QWERTYUIOPASDFGHJKLZXCVBNM");
}
function getRandomNumber() {
return rando(9);
}
function getRandomSymbol() {
return rando('!@#$%^&*(){}[]=<>/,.');
}
<html>
<head>
<script src="https://randojs.com/1.0.0.js"></script>
</head>
<body>
<header>
<h1 class="text-center" style="margin-top: 20px;">Password Generator</h1>
</header>
<div class="card shadow-sm p-3 mb-5 bg-white rounded" style="max-width: 60%; margin: 40px auto;">
<div class="card-body">
<h2 class="card-title">Generate a Password</h2>
<textarea style="width: 100%; text-align:center; resize:none; border: dashed 2px lightgrey; margin:30px auto; padding: 10px auto; min-height: 100px;" readonly id="password" placeholder="Your Secure Password" aria-label="Generated Password"></textarea>
<button type="button" class="btn btn-danger" id="generate" style="float:left; border-radius:40px; padding-right: 30px; padding-left: 30px;">Generate Password</button>
<button type="button" class="btn btn-light" id="clipboard" style="float:right; border-radius:40px; padding-right: 30px; padding-left: 30px; background-color: silver; color:white">Copy to clipboard</button>
</div>
</div>
</body>
</html>
变体
<!DOCTYPE html>
<html>
<head>
<title>Password Generator</title>
<script type="text/javascript">
var uppers = "ABCDEFHGIJKLMNOPQRSTUVWXYZ";
var lowers = "abcdefghijklmnopqrstuvwxyz";
var digits = "0123456789";
var specials = "!@#$%^&*()_-=+[]{}";
var minlen = 3;
var maxlen = 128;
function genPwd() {
var dict = '';
var pwd = '';
var len = document.getElementById("stlength").value;
if ( document.getElementById("ckuppers").checked ) {
dict += uppers;
}
if ( document.getElementById("cklowers").checked ) {
dict += lowers;
}
if ( document.getElementById("ckdigits").checked ) {
dict += digits;
}
if ( document.getElementById("ckspecials").checked ) {
dict+= specials;
}
if ( dict == '' ) {
pwd = 'You must select some character type(s)';
}
else {
for ( var i = 0; i < len; ++i ) {
pwd += dict[Math.floor(Math.random() * dict.length)];
}
}
document.getElementById("txtpassword").value = pwd;
}
</script>
</head>
<body>
<h1>Password Generator</h1>
<form>
<table cellspacing="10">
<tr>
<td>
<input type="checkbox" id="ckuppers"> Uppercase
</td>
<td>
<input type="checkbox" id="cklowers"> Lowercase
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="ckdigits"> Digits
</td>
<td>
<input type="checkbox" id="ckspecials"> Specials
</td>
</tr>
<tr>
<td>
Length <select id="stlength">
<script type="text/javascript">
for ( var i = minlen; i <= maxlen; ++i ) {
document.writeln('<option>' + i + '</option>');
}
</script>
</select>
</td>
<td>
<input type="button" value="Generate" onclick="genPwd();">
</td>
</tr>
<tr>
<td colspan="2">
Password: <input type="text" size="64" id="txtpassword">
</td>
</tr>
</table>
</form>
</body>
</html>
我正在尝试创建一个随机密码生成器,要求用户输入 8-128 个字符,然后确认使用大写、小写、符号和/或数字。我正在尝试获取密码以在文本区域生成和打印,我知道我遗漏了一些东西,但我不确定是什么。我为粗略的代码道歉。我才刚刚开始。
var plength = prompt("How many characters would you like your password to be?")
if (plength < 8 || plength > 128){
alert("Length must be 8-128 characters")
}
if (plength >= 8 && plength <= 128){
var cuppercase = confirm("Would you like to use uppercase letters?")
var clowercase = confirm("Would you like to use lowercase letters?")
var cnumbers = confirm("would you like to use numbers?")
var csymbols = confirm("would you like to use special characters?")
}
if (cuppercase != true && clowercase != true && cnumbers != true && csymbols != true){
alert("You must select at least one character type!")
}
//DOM elements
const resultEl = document.getElementById('password');
document.getElementById('generate').addEventListener('click', () => {
const hasLower = clowercase.true;
const hasUpper = cuppercase.true;
const hasNumber = cnumbers.true;
const hasSymbol = csymbols.true;
resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length);
});
const randomFunc = {
lower: getRandomLower,
upper: getRandomUpper,
number: getRandomNumber,
symbol: getRandomSymbol
}
document.getElementById('clipboard').addEventListener('click', () => {
const textarea = document.createElement('textarea');
const password = resultEl.innerText;
if(!password) { return; }
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
alert('Password copied to clipboard');
});
function generatePassword(lower, upper, number, symbol, length) {
let generatedPassword = '';
const typesCount = lower + upper + number + symbol;
const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(item => Object.values(item)[0]);
// create a loop
for(let i=0; i<length; i+=typesCount) {
typesArr.forEach(type => {
const funcName = Object.keys(type)[0];
generatedPassword += randomFunc[funcName]();
});
}
const finalPassword = generatedPassword.slice(0, length);
return finalPassword;
}
// Generator functions
function getRandomLower() {
return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
function getRandomUpper() {
return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
function getRandomNumber() {
return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}
function getRandomSymbol() {
const symbols = '!@#$%^&*(){}[]=<>/,.'
return symbols[Math.floor(Math.random() * symbols.length)];
}
<header>
<h1 class="text-center" style= "margin-top: 20px;">Password Generator</h1>
</header>
<div class="card shadow-sm p-3 mb-5 bg-white rounded" style="max-width: 60%; margin: 40px auto;">
<div class="card-body">
<h2 class="card-title">Generate a Password</h2>
<textarea
style= "width: 100%; text-align:center; resize:none; border: dashed 2px lightgrey; margin:30px auto; padding: 10px auto; min-height: 100px;"
readonly
id="password"
placeholder="Your Secure Password"
aria-label="Generated Password"
></textarea>
<button type="button" class="btn btn-danger" id= "generate" style= "float:left; border-radius:40px; padding-right: 30px; padding-left: 30px;">Generate Password</button>
<button type="button" class="btn btn-light" id= "clipboard" style= "float:right; border-radius:40px; padding-right: 30px; padding-left: 30px; background-color: silver; color:white">Copy to clipboard</button>
</div>
</div>
好的,我在你的代码中发现了两个问题
您未在本节中定位来自 JS 的
generate
idgenerate.addEventListener('click', () => {
const hasLower = clowercase.true; const hasUpper = cuppercase.true; const hasNumber = cnumbers.true; const hasSymbol = csymbols.true; resultEl.innerText = generatePassword(hasLower, hasUpper, hasNumber, hasSymbol, length); });
所以您可以简单地将其转换为 document.getElementById('generate').addEventListener(...)
clipboard
也是如此,所以如果你解决了这个问题,我认为你就可以开始了。
更新:
我一直在提到与这个问题类似的问题,所以我想我应该写一些更简洁的代码让他们在这里看到:
var length = Number(prompt("How many characters would you like your password to be?"));
while (isNaN(length) || length < 8 || length > 128) length = Number(prompt("Length must be 8-128 characters. How many characters would you like your password to be?"));
var uppers = confirm("Would you like to use uppercase letters?");
var lowers = confirm("Would you like to use lowercase letters?");
var numbers = confirm("Would you like to use numbers?");
var symbols = confirm("Would you like to use special characters?");
while (!uppers && !lowers && !numbers && !symbols) {
alert("You must select at least one character type!");
uppers = confirm("Would you like to use uppercase letters?");
lowers = confirm("Would you like to use lowercase letters?");
numbers = confirm("Would you like to use numbers?");
symbols = confirm("Would you like to use special characters?");
}
window.addEventListener('load', function() {
generateNewPassword();
});
function generateNewPassword() {
var password = "";
var allowed = {};
if (uppers) password += rando(allowed.uppers = "QWERTYUIOPASDFGHJKLZXCVBNM");
if (lowers) password += rando(allowed.lowers = "qwertyuiopasdfghjklzxcvbnm");
if (numbers) password += rando(allowed.numbers = "1234567890");
if (symbols) password += rando(allowed.symbols = "!@#$%^&*(){}[]=<>/,.");
for (var i = password.length; i < length; i++) password += rando(rando(allowed).value);
document.getElementById("password").value = randoSequence(password).join("");
}
<script src="https://randojs.com/1.0.0.js"></script>
<input type="text" id="password"/>
<button onclick="generateNewPassword();">Generate new password</button>
我使用 randojs.com 使随机性变得简单易读,就像我在最初对这个问题的回答中所做的那样。如果您需要解释,请访问该站点。只需添加:
<script src="https://randojs.com/1.0.0.js"></script>
在你的 head 标签中可以使用 randojs 函数。
旧答案:
您漏掉了一些分号。您应该等到页面加载通过包装访问元素:
window.addEventListener('load', function (){
});
您应该获取文本区域的值,而不是其内部文本。我还在开头为 prompts/confirms 添加了循环,以强制用户重试,直到他们提供有效输入。除此之外,我只是稍微清理了一下格式。我使用 randojs.com 使随机性更易于阅读。如果您需要解释,请访问该站点。我刚刚添加了这个:
<script src="https://randojs.com/1.0.0.js"></script>
在您的 head 标签中,以便能够使用 randojs 函数。如果您有任何问题,请告诉我。
window.addEventListener('load', function() {
var plength = prompt("How many characters would you like your password to be?");
while (plength < 8 || plength > 128) {
plength = prompt("Length must be 8-128 characters. How many characters would you like your password to be?");
}
var cuppercase = confirm("Would you like to use uppercase letters?");
var clowercase = confirm("Would you like to use lowercase letters?");
var cnumbers = confirm("would you like to use numbers?");
var csymbols = confirm("would you like to use special characters?");
while (!(cuppercase || clowercase || cnumbers || csymbols)) {
alert("You must select at least one character type!");
cuppercase = confirm("Would you like to use uppercase letters?");
clowercase = confirm("Would you like to use lowercase letters?");
cnumbers = confirm("would you like to use numbers?");
csymbols = confirm("would you like to use special characters?");
}
//DOM elements
const resultEl = document.getElementById('password');
document.getElementById('generate').addEventListener('click', () => {
resultEl.value = generatePassword(clowercase, cuppercase, cnumbers, csymbols, plength);
});
document.getElementById('clipboard').addEventListener('click', () => {
const textarea = document.createElement('textarea');
const password = resultEl.value;
if (!password) {
return;
}
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
textarea.remove();
alert('Password copied to clipboard');
});
});
const randomFunc = {
lower: getRandomLower,
upper: getRandomUpper,
number: getRandomNumber,
symbol: getRandomSymbol
};
function generatePassword(lower, upper, number, symbol, length) {
let generatedPassword = '';
const typesCount = lower + upper + number + symbol;
const typesArr = [{
lower
}, {
upper
}, {
number
}, {
symbol
}].filter(item => Object.values(item)[0]);
// create a loop
for (let i = 0; i < length; i += typesCount) {
typesArr.forEach(type => {
const funcName = Object.keys(type)[0];
generatedPassword += randomFunc[funcName]();
});
}
const finalPassword = generatedPassword.slice(0, length);
return finalPassword;
}
// Generator functions
function getRandomLower() {
return rando("qwertyuiopasdfghjklzxcvbnm")
}
function getRandomUpper() {
return rando("QWERTYUIOPASDFGHJKLZXCVBNM");
}
function getRandomNumber() {
return rando(9);
}
function getRandomSymbol() {
return rando('!@#$%^&*(){}[]=<>/,.');
}
<html>
<head>
<script src="https://randojs.com/1.0.0.js"></script>
</head>
<body>
<header>
<h1 class="text-center" style="margin-top: 20px;">Password Generator</h1>
</header>
<div class="card shadow-sm p-3 mb-5 bg-white rounded" style="max-width: 60%; margin: 40px auto;">
<div class="card-body">
<h2 class="card-title">Generate a Password</h2>
<textarea style="width: 100%; text-align:center; resize:none; border: dashed 2px lightgrey; margin:30px auto; padding: 10px auto; min-height: 100px;" readonly id="password" placeholder="Your Secure Password" aria-label="Generated Password"></textarea>
<button type="button" class="btn btn-danger" id="generate" style="float:left; border-radius:40px; padding-right: 30px; padding-left: 30px;">Generate Password</button>
<button type="button" class="btn btn-light" id="clipboard" style="float:right; border-radius:40px; padding-right: 30px; padding-left: 30px; background-color: silver; color:white">Copy to clipboard</button>
</div>
</div>
</body>
</html>
变体
<!DOCTYPE html>
<html>
<head>
<title>Password Generator</title>
<script type="text/javascript">
var uppers = "ABCDEFHGIJKLMNOPQRSTUVWXYZ";
var lowers = "abcdefghijklmnopqrstuvwxyz";
var digits = "0123456789";
var specials = "!@#$%^&*()_-=+[]{}";
var minlen = 3;
var maxlen = 128;
function genPwd() {
var dict = '';
var pwd = '';
var len = document.getElementById("stlength").value;
if ( document.getElementById("ckuppers").checked ) {
dict += uppers;
}
if ( document.getElementById("cklowers").checked ) {
dict += lowers;
}
if ( document.getElementById("ckdigits").checked ) {
dict += digits;
}
if ( document.getElementById("ckspecials").checked ) {
dict+= specials;
}
if ( dict == '' ) {
pwd = 'You must select some character type(s)';
}
else {
for ( var i = 0; i < len; ++i ) {
pwd += dict[Math.floor(Math.random() * dict.length)];
}
}
document.getElementById("txtpassword").value = pwd;
}
</script>
</head>
<body>
<h1>Password Generator</h1>
<form>
<table cellspacing="10">
<tr>
<td>
<input type="checkbox" id="ckuppers"> Uppercase
</td>
<td>
<input type="checkbox" id="cklowers"> Lowercase
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="ckdigits"> Digits
</td>
<td>
<input type="checkbox" id="ckspecials"> Specials
</td>
</tr>
<tr>
<td>
Length <select id="stlength">
<script type="text/javascript">
for ( var i = minlen; i <= maxlen; ++i ) {
document.writeln('<option>' + i + '</option>');
}
</script>
</select>
</td>
<td>
<input type="button" value="Generate" onclick="genPwd();">
</td>
</tr>
<tr>
<td colspan="2">
Password: <input type="text" size="64" id="txtpassword">
</td>
</tr>
</table>
</form>
</body>
</html>