为什么我的密码返回未定义？

Question

我目前正在学习 Javascript。 我相信代码运行良好。 但是，当我尝试代码时，并没有将随机密码返回给我。 我有一个未定义的结果。 我已经添加了代码，我相信这是我的循环或第一个函数 writePassword 的问题。 谢谢你。

 // Assignment Code var generateBtn = document.querySelector("#generate"); // Array containing numbers from 0 to 1 var number = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; // Array containing letters from A to Z in uppercase var upperCase = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "X", "Y", "Z", ]; // Array containing letters from a to z in lowercase var lowerCase = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "x", "y", "z", ]; // Array containing the special characters for the password var spChar = ["!", "#", "$", "%", "&", "'", "(", ")", "*", "+", ",", "-", ".", "/", "\\:", "\\;", " < ", "=", " > ", " ? ", "@", "[", "\\\\", "]", " ^ ", "_", "`", "{", "|", "}", "~"]; // This variable is used for the concanation of the variables later var choices; // Write password to the #password input function writePassword() { var password = generatePassword(); var passwordText = document.querySelector("#password"); passwordText.value = password; } function generatePassword() { // This next line of code is used to tell the user to add a value, and if they don't add a correct value. They will be reminded. var firstPrompt = prompt("How long would you like your password to be? Choose between 8 to 128 characters."); if (!firstPrompt) { alert("Please add a value"); } else if (firstPrompt < 8 || firstPrompt > 128) { prompt("Please add a value higher than 8 or lower than 128"); } else { // This next line of code is used to ask the user how they would like their password to be like. var secondPrompt = confirm("Do you want numbers?"); var thirdPrompt = confirm("Do you want special characters?"); var fourthPrompt = confirm("Do you want upper case characters?"); var fifthPrompt = confirm("Do you want lower case characters?"); } // This next line of code is used in case no option has been chosen for the password generator if (!secondPrompt && !thirdPrompt && !fourthPrompt && !fifthPrompt) { alert("Please choose a criteria"); } // These line of code is if the user selects the all the options available for the password else if (secondPrompt && thirdPrompt && fourthPrompt && fifthPrompt) { choices = spChar.concat(number, upperCase, lowerCase); } // These next lines of code are if the user selects only 3 different combinations for their password else if (secondPrompt && thirdPrompt && fourthPrompt) { choices = number.concat(upperCase, spChar); } else if (secondPrompt && thirdPrompt && fifthPrompt) { choices = number.concat(upperCase, lowerCase); } else if (fifthPrompt && thirdPrompt && fourthPrompt) { choices = lowerCase.concat(upperCase, spChar); } // These next lines of code are only if the user selects 2 different possible combinations for their password else if (secondPrompt && thirdPrompt) { choices = number.concat(spChar); } else if (secondPrompt && fourthPrompt) { choices = number.concat(upperCase); } else if (secondPrompt && fifthPrompt) { choices = number.concat(lowerCase); } else if (thirdPrompt && fourthPrompt) { choices = spChar.concat(upperCase); } else if (thirdPrompt && fifthPrompt) { choices = spChar.concat(lowerCase); } else if (fourthPrompt && fifthPrompt) { choices = upperCase.concat(lowerCase); } // These next lines of code are only if the user selects only one option for the password else if (secondPrompt) { choices = number; } else if (thirdPrompt) { choices = spChar; } else if (fourthPrompt) { choices = upperCase; } else if (fifthPrompt) { choices = lowerCase; } // empty array that will contain the new empty password var randomPassword = []; // This next line of code is the loop requiered for the generation of the password for (var i = 0; i <= firstPrompt.value; i++) { var allChoices = choices[Math.floor(Math.random() * choices.length)]; randomPassword.push(allChoices); } } // Add event listener to generate button generateBtn.addEventListener("click", writePassword);

 <!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>

Answer 1

您不会从generatePassword()返回任何内容。 它需要以

return randomPassword.join('');

将数组转换为字符串并将其返回给调用者。

您还使字符集的选择变得比需要的复杂得多。 将choices初始化为一个空数组，然后在每个提示之后将适当的数组连接到它，而不是测试所有不同的答案组合。

您声明了变量choice ，但其余代码使用choices 。

for循环使用firstPrompt.value ，它应该只是firstPrompt （ .value用于获取输入元素的值，而不是变量）。 此外，循环条件应该使用< ，而不是<= 。

您应该在循环中提示输入字符数，直到用户给出有效答案，而不仅仅是两次。

 // Assignment Code var generateBtn = document.querySelector("#generate"); // Array containing numbers from 0 to 1 var number = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; // Array containing letters from A to Z in uppercase var upperCase = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "X", "Y", "Z", ]; // Array containing letters from a to z in lowercase var lowerCase = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "x", "y", "z", ]; // Array containing the special characters for the password var spChar = ["!", "#", "$", "%", "&", "'", "(", ")", "*", "+", ",", "-", ".", "/", "\\:", "\\;", " < ", "=", " > ", " ? ", "@", "[", "\\\\", "]", " ^ ", "_", "`", "{", "|", "}", "~"]; // This variable is used for the concanation of the variables later var choices = []; // Write password to the #password input function writePassword() { var password = generatePassword(); var passwordText = document.querySelector("#password"); passwordText.value = password; } function generatePassword() { // This next line of code is used to tell the user to add a value, and if they don't add a correct value. They will be reminded. while (true) { var firstPrompt = prompt("How long would you like your password to be? Choose between 8 to 128 characters."); if (!firstPrompt) { alert("Please add a value"); } else if (firstPrompt < 8 || firstPrompt > 128) { prompt("Please add a value higher than 8 or lower than 128"); } else { break; } } // This next line of code is used to ask the user how they would like their password to be like. if (confirm("Do you want numbers?")) { choices = choices.concat(number); } if (confirm("Do you want special characters?")) { choices = choices.concat(spChar); } if (confirm("Do you want upper case characters?")) { choices = choices.concat(upperCase); } if (confirm("Do you want lower case characters?")) { choices = choices.concat(lowerCase); } // This next line of code is used in case no option has been chosen for the password generator if (choices.length == 0) { alert("Please choose a criteria"); } // empty array that will contain the new empty password var randomPassword = []; // This next line of code is the loop requiered for the generation of the password for (var i = 0; i < firstPrompt; i++) { var allChoices = choices[Math.floor(Math.random() * choices.length)]; randomPassword.push(allChoices); } return randomPassword.join(""); } // Add event listener to generate button generateBtn.addEventListener("click", writePassword);

 <!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>

Answer 2

generatePassword() 似乎没有 return 语句。 也许你需要添加：

return randomPassword;

到函数的底部。