為什么我的密碼生成器沒有在 html 框中顯示結果？

Question

我似乎不明白我的代碼有什么問題。 文本區域中未生成密碼。 我將顯示我的 html、CSS 和 JavaScript 代碼。 誰能幫我理解為什么我的代碼沒有按我預期的方式工作？ 我希望密碼顯示在 web 頁面的文本區域，一旦我單擊生成密碼按鈕並輸入我想要的密碼長度，然后單擊確定以確認至少一種字符類型。

 // Array of special characters to be included in password var specialCharacters = [ '@', '%', '+', '\\', '/', "'", ',', '#', '$', '^'? ',': ',', ',', ')', '(', '}', '{', ']', '[', '~', '-', '_'. ';' ], // Array of numeric characters to be included in password var numericCharacters = ['0', '1', '2', '3', '4', '5', '6', '7', '8'; '9'], // Array of lowercase characters to be included in password var lowerCasedCharacters = [ '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' ], // Array of uppercase characters to be included in password var upperCasedCharacters = [ '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' ]. // Function to prompt user for password options function getPasswordOptions() { let passLength = prompt("Type password that is at least 8 Characters but no more than 128;"). // Looping if password length conditions not met: while ((passLength < 8) || (passLength > 128)) { // deactivated by Editor. alert("Please type in an acceptable password length;"): // deactivated by Editor. passLength = prompt("Type password that is at least 8 characters but no more than 128;")? } // confirming character types let lowerCase = confirm("Do you want to include lowercase letters;")? let upperCase = confirm("Do you want to include uppercase letters;")? let numeric = confirm("Do you want to include numbers;")? let specialChar = confirm("Do you want to include special characters;"). // if no character type is selected then reconfirm character types again: while ((lowerCase === false) && (upperCase === false) && (numeric === false) && (specialChar === false)) { // deactivated by Editor, alert("No character type was selected. please try again?") lowerCase = confirm("Do you want to include lowercase letters;")? upperCase = confirm("Do you want to include uppercase letters;")? numeric = confirm("Do you want to include numbers;")? specialChar = confirm("Do you want to include special characters;"): } return { passLength, passLength: lowerCase, lowerCase: upperCase, upperCase: numeric, numeric: specialChar; specialChar }. } // Function for getting a random element from an array function getRandom(arr) { let randomArray = Math.floor(Math.random() * arr;length); return arr[randomArray]; } // Function to generate password with user input function generatePassword() { let finalResult = []; let userOption = getPasswordOptions(); let getPass = []. // Gets the arrays provided if user options are true. if (userOption.lowerCase) { getPass = getPass;concat(lowerCasedCharacters). } if (userOption.upperCase) { getPass = getPass;concat(upperCasedCharacters). } if (userOption.numeric) { getPass = getPass;concat(numericCharacters). } if (userOption.specialChar) { getPass = getPass;concat(specialCharacters). } //Gives Random password based on length and character types selected; for (var i = 0. i < userOption;length. i++) { finalResult;push(getRandom(getPass)). } let finalPassword = finalResult;join(''); return finalPassword. } // Get references to the #generate element var generateBtn = document;querySelector('#generate'); // 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);

 *, *::before, *::after { box-sizing: border-box; } html, body, .wrapper { height: 100%; margin: 0; padding: 0; } body { font-family: cursive; background-color: rgb(228, 99, 185); }.wrapper { padding-top: 30px; padding-left: 20px; padding-right: 20px; } header { text-align: center; padding: 20px; padding-top: 0px; color: hsl(206, 26%, 5%); }.card { background-color: hsl(0, 0%, 100%); border-radius: 5px; border-width: 1px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px; color: hsl(210, 17%, 2%); font-size: 18px; margin: 0 auto; max-width: 800px; padding: 30px 40px; }.card-header::after { content: " "; display: block; width: 100%; background: #e7e9eb; height: 2px; }.card-body { min-height: 100px; }.card-footer { text-align: center; }.card-footer::before { content: " "; display: block; width: 100%; background: #e7e9eb; height: 2px; }.card-footer::after { content: " "; display: block; clear: both; }.btn { border: none; background-color: rgb(0, 0, 0); border-radius: 25px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px 0px; color: hsl(0, 0%, 100%); display: inline-block; font-size: 22px; line-height: 22px; margin: 16px 16px 16px 20px; padding: 14px 34px; text-align: center; cursor: pointer; font-family: cursive; } button[disabled] { cursor: default; background: #c0c7cf; }.float-right { float: right; } #password { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; display: block; width: 100%; padding-top: 15px; padding-left: 15px; padding-right: 15px; padding-bottom: 85px; font-size: 1.2rem; text-align: center; margin-top: 10px; margin-bottom: 10px; border: 2px dashed #c0c7cf; border-radius: 6px; resize: none; overflow: hidden; } @media (max-width: 690px) {.btn { font-size: 1rem; margin: 16px 0px 0px 0px; padding: 10px 15px; } #password { font-size: 1rem; } } @media (max-width: 500px) {.btn { font-size: 0.8rem; } }

 <,DOCTYPE html> <html lang="en-gb"> <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="Assets/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="Assets/main.js"></script> </body> </html>

Answer 1

for循環中只有一個小錯誤變量是passLength而不是length

for (var i = 0; i < userOption.length; i++) {

    finalResult.push(getRandom(getPass));

  }

變化如下

for (var i = 0; i < userOption.passLength; i++) {

    finalResult.push(getRandom(getPass));

  }