随机密码生成器 Javascript 不起作用

Question

我正在尝试创建一个随机密码生成器，它要求用户输入 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>

Answer 1

更新：

我一直在向这个问题提到类似的问题，所以我想我会写一些更清晰的代码让他们在这里看到：

 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 (){

});

您应该获取一个 textarea 的值，而不是它的innerText。 我还在开始时为提示/确认添加了循环，以强制用户再次尝试，直到他们提供有效输入。 除此之外，我只是稍微清理了一下格式。 我使用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>

Answer 2

好的，我在您的代码中发现了两个问题

1. 在本节中，您没有针对来自 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也是如此，所以如果你解决了这个问题，我认为你很高兴。

Answer 3

作为变体

 <!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">&nbsp;Uppercase </td> <td> <input type="checkbox" id="cklowers">&nbsp;Lowercase </td> </tr> <tr> <td> <input type="checkbox" id="ckdigits">&nbsp;Digits </td> <td> <input type="checkbox" id="ckspecials">&nbsp;Specials </td> </tr> <tr> <td> Length&nbsp;<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:&nbsp;<input type="text" size="64" id="txtpassword"> </td> </tr> </table> </form> </body> </html>