Why is my password returning as undefined?

Question

I am currently learning Javascript. The code works well I believe. However, when I try the code, instead of having a random password returned to me. I am having an undefined result instead. I have added the code, I believe it is either a problem with my loop or with the first function, function writePassword. Thank you.

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

You're not returning anything from generatePassword(). It needs to end with

return randomPassword.join('');

to turn the array into a string and return that to the caller.

You're also making the selection of the characters sets much more complicated than it needs to be. Initialize choices to an empty array, and then after each prompt concatenate the appropriate array to it, instead of testing all the different combinations of answers.

You declared the variable choice, but the rest of the code uses choices.

The for loop used firstPrompt.value, it should just be firstPrompt (.value is for getting the value of an input element, not a variable). Also, the looping condition should use <, not <=.

You should prompt for the number of characters in a loop until the user gives a valid answer, not just twice.

// 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() does not appear to have a return statement. Maybe you need to add:

return randomPassword;

to the bottom of the function.