The output of my password generator is less than desired

Question

I'm trying to make a password generator for a coding bootcamp but I'm running into an issue that has 2 outcomes both of which aren't desired. The HTML is very basic and I'm supposed to use prompts for the selection. I included my code but took out a few unnecessary things, the other 14 if-else statements, and a few variables. I'm turning in the project with the ugly formatting and spaces but still would like to know where I went wrong. The two outcomes are

1. The selections won't be unique and instead use the same character over and over
   
2. It comes out looking sloppy and adds spaces into it
   

function randomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
//random uppercase from character code
function randomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
//random number from character code
function randomNumber() {
  return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}
// random symbol from character code
function randomSymbol() {
  let symbol = "!@#$%^&*()_-><[]}{";
  return symbol[Math.floor(Math.random() * symbol.length)];
}

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

// function for generatePassword
function generatePassword() {
  //Confirms # of characters needed
  click = parseInt(prompt("How many characters?", "8-128"));
  if (!click) {
    alert("Input is needed");
    //Ensures the character count isn't too high or low
  } else if (click < 8 || click > 128) {
    click = parseInt(prompt("Answer must be between 8 and 128"));
  } else {
    //The procedding few lines will confirm other variables
    useNumbers = confirm("Include numbers?");
    useLower = confirm("Include lowercase letters?");
    useUpper = confirm("Include uppercase letters?");
    useSymbol = confirm("Include special characters?");
  }
  //If all prompts are denied
  if (!useLower && !useUpper && !useNumbers && !useSymbol) {
    choices = alert("At least one option is needed");
    //If all prompts are accepted
  } else if (useLower && useUpper && useNumbers && useSymbol) {
    choices = randomLower().concat(randomUpper, randomNumber, randomSymbol);
//code only makes repeating characters
//choices = randomLower().concat(randomUpper(), randomNumber(), randomSymbol())
  
//placeholder for an array for user choices
  var pWord = [];
  //for loop to randomize selection
  for (let i = 0; i < click; i++) {
    var selected = choices[Math.floor(Math.random() * choices.length)];
    pWord.push(selected);
  }

  //.join will take all choices in the array pWord and turns it into a string
  var pass = pWord.join("");
  UserInput(pass);
  return pass;
}
// This puts the new password into the textbox
function UserInput(pass) {
  document.getElementById("password").value = pass;
}

Answer 1

Im writing the same pattren as per passwords generators website. you can add this javascript in your html. You can generate random alphanumeric strings in JavaScript using the following code:

function generateRandomString(length) {
  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
  var string_length = length || 8;
  var randomstring = '';
  for (var i=0; i<string_length; i++) {
    var rnum = Math.floor(Math.random() * chars.length);
    randomstring += chars.substring(rnum,rnum+1);
  }
  return randomstring;
}

Answer 2

• You only set choices if the user selects all the options.
• When you set choices, you don't call the functions in the arguments to concat(). So you're concatenating the function definitions, not the random letters returned by the functions.
• Even if you fix that to call the functions, you'll just get 4 characters. You need to call the randomXXX functions in the loop that generates each character.

In my code I've made choices an array of functions, not characters. I add each function to the array conditionally from the prompts. Then the loop picks a random function first, and calls it to get a random character of that type.

// function for generatePassword
function generatePassword() {
  //Confirms # of characters needed
  let click = parseInt(prompt("How many characters?", "8-128"));
  let choices = [];
  if (!click) {
    alert("Input is needed");
    //Ensures the character count isn't too high or low
  } else if (click < 8 || click > 128) {
    click = parseInt(prompt("Answer must be between 8 and 128"));
  } else {
    //The procedding few lines will confirm other variables
    if (confirm("Include numbers?")) {
      choices.push(randomNumber);
    }
    if (confirm("Include lowercase letters?")) {
      choices.push(randomLower);
    }
    if (confirm("Include uppercase letters?")) {
      choices.push(randomUpper);
    }
    if (confirm("Include special characters?")) {
      choices.push(randomSymbol);
    }
  }
  //If all prompts are denied
  if (choices.length == 0) {
    alert("At least one option is needed");
    return;
  }

  //placeholder for an array for user choices
  var pWord = [];
  //for loop to randomize selection
  for (let i = 0; i < click; i++) {
    let selected = choices[Math.floor(Math.random() * choices.length)];
    pWord.push(selected());
  }

  //.join will take all choices in the array pWord and turns it into a string
  var pass = pWord.join("");
  return pass;
}

console.log(generatePassword());

function randomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
//random uppercase from character code
function randomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
//random number from character code
function randomNumber() {
  return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}
// random symbol from character code
function randomSymbol() {
  let symbol = "!@#$%^&*()_-><[]}{";
  return symbol[Math.floor(Math.random() * symbol.length)];
}