Why is my password generator not showing the result in the html box?-CodePudding

I don't seem to understand what is wrong with my code. The password is not getting generated in the text area. I will show both my html, CSS and JavaScript code. Could anyone help me understand why my code is not working the way I expected it to? I expected the password to show up in the text area of the web page, once I clicked the generate password button and entered the length of the password I wanted, and clicked on OK to confirm at least one character type.

// 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 >
    <header>
      <h1>Password Generator</h1>
    </header>
    <div >
      <div >
        <h2>Generate a Password</h2>
      </div>
      <div >
        <textarea readonly id="password" placeholder="Your Secure Password" aria-label="Generated Password"></textarea>
      </div>
      <div >
        <button id="generate" >Generate Password</button>
      </div>
    </div>
  </div>
  <script src="Assets/main.js"></script>
</body>

</html>

CodePudding user response：

There is just a small mistake in the for loop the variable is passLength not length

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

    finalResult.push(getRandom(getPass));

  }

The change is as follows

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

    finalResult.push(getRandom(getPass));

  }