隨機密碼生成器 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>