I have multiple arrays that have been combined depending on user response. The only problem I have at this point is getting this final array to show up in the text field for the end user to see. Thanks for all the potential help!
JavaScript
x
61
61
1
var generateBtn = document.querySelector("#generate");2
3
//write password function 4
function writePassword(){5
var password = generatePassword();6
var passwordText = document.querySelector("#password");7
passwordText.value = password;8
}9
10
// Add event listener to generate button11
generateBtn.addEventListener("click", writePassword)12
13
14
15
//defining global var16
var lowercase = 'abcdefghijklmnopqrstuvwxyz'17
var uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'18
var number = '1234567890'19
var special = '!@#$%^&*()'20
//generate password function gets called in writePassword function, and it should return the final password21
function generatePassword(){22
23
//blank array that will be the final password that is appended and shown to user24
var chosenPassword = ''25
26
//password length function27
var passwordLength = prompt('How long would you like your password to be? (must be between 8 and 128 characters)')28
if (passwordLength < 8 || passwordLength > 128) {29
alert('Must be between 8 and 128 characters!')30
return generatePassword();31
}32
//if boolean statements33
var hasUpper = confirm('Would you like your passwords to have uppercase characters?')34
if (hasUpper === true) {35
chosenPassword = uppercase.concat(chosenPassword);36
}37
var hasLower = confirm('Would you like your passwords to have lowercase characters?')38
if (hasLower === true) {39
chosenPassword = lowercase.concat(chosenPassword);40
}41
var hasNumber = confirm('Would you like your passwords to have numbers?')42
if (hasNumber === true) {43
chosenPassword = number.concat(chosenPassword);44
}45
var hasSpecial = confirm('Would you like your passwords to have special characters?')46
if (hasSpecial === true) {47
chosenPassword = special.concat(chosenPassword);48
}49
//failsafe for no user info given50
if (!passwordLength || !hasLower && !hasUpper && !hasNumber && !hasSpecial) {51
alert('Must provide some info to be contained in your password!')52
}53
54
//selecting rand function for chosenPass string55
for (var i = 0; i < passwordLength; i++) {56
password += chosenPassword.charAt(Math.floor(Math.random() * chosenPassword)) 57
}58
return password;59
60
}61
I have narrowed the problem to either the write function or the generate function. The booleans and math.random functionality are working as expected and have confirmed this in the console.
EDIT: Adding HTML for those who have asked. As well as deleting the redundant function that was the same as the write password function.
JavaScript
1
37
37
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8" />5
<meta name="viewport" content="width=device-width, 6
initial-scale=1.0" />7
<meta http-equiv="X-UA-Compatible" content="ie=edge" />8
<title>Password Generator</title>9
<link rel="stylesheet" href="style.css" />10
</head>11
<body>12
<div class="wrapper">13
<header>14
<h1>Password Generator</h1>15
</header>16
<div class="card">17
<div class="card-header">18
<h2>Generate a Password</h2>19
</div>20
<div class="card-body">21
<textarea22
readonly23
id="password"24
placeholder="Your Secure Password"25
aria-label="Generated Password"26
></textarea>27
</div>28
<div class="card-footer">29
<button id="generate" class="btn">Generate 30
Password</button>31
</div>32
</div>33
</div>34
<script src="script.js"></script>35
</body>36
</html>37
Advertisement
Answer
Several issues:
enterpasswordis a function that is never used (and has a spelling issue and missing parentheses). It looks to have the same purpose aswritePassword, so it can be removed.passwordLengthis going to be a string, better convert it immediately to a number data type, or else code will continue with some invalid input like “one”- The expression for getting a random character is wrong. It should have
chosenPassword.lengthinstead ofchosenPassword. - The algorithm does not ensure that at least one character from each selected character group is taken. It only makes sure no other character is taken.
Some other remarks:
Using
promptis not very user-friendly, as user is forced to follow that input path and cannot go back to change a previous answer. Useinputelements instead (number and checkbox types), so that when user clicks the button, all input is already there.Avoid code repetition, and deal with each character group using the same code in a loop.
To ensure at least one character is taken from each selected character group, you could take a random character from each group, then append random characters from any group (like you did, or by shuffling & slicing), and then shuffle to get those first characters at random places too.
Here is your code adapted to work like that:
JavaScript
1
53
53
1
var generateBtn = document.querySelector("#generate");2
generateBtn.addEventListener("click", writePassword)3
4
function writePassword(){5
var password = generatePassword();6
var passwordText = document.querySelector("#password");7
passwordText.value = password;8
}9
10
function shuffle(arr) {11
for (let i = arr.length - 1; i > 0; i--) {12
let j = Math.floor(Math.random() * (i + 1));13
let temp = arr[i];14
arr[i] = arr[j];15
arr[j] = temp;16
}17
}18
19
function randomFrom(arrayLike) {20
return arrayLike[Math.floor(Math.random() * arrayLike.length)];21
}22
23
// Avoid code repetition: deal with groups in an array and loops24
var groups = [25
'abcdefghijklmnopqrstuvwxyz',26
'ABCDEFGHIJKLMNOPQRSTUVWXYZ',27
'1234567890',28
'!@#$%^&*()',29
];30
31
function generatePassword() {32
var passwordLength = +document.querySelector("#length").value;33
if (Number.isNaN(passwordLength) || passwordLength < 8 || passwordLength > 128) {34
alert('Password length must be between 8 and 128 characters!')35
return;36
}37
var checkboxes = document.querySelectorAll("[type=checkbox]");38
var hasGroup = groups.map((group, i) => checkboxes[i].checked);39
if (!hasGroup.includes(true)) {40
alert('Must select some character groups to be contained in your password!')41
}42
43
// Collect all allowed characters44
var password = groups.filter((group, i) => hasGroup[i]).flatMap(s => [s]);45
// Collect one character from each required group46
var needed = groups.map((group, i) => hasGroup[i] ? randomFrom(group) : "").filter(Boolean);47
shuffle(password);48
// Get the right number of characters, appending the required ones49
password.splice(passwordLength - needed.length, Infinity, needed);50
// Don't leave the needed characters at the end51
shuffle(password);52
return password.join("");53
}JavaScript
1
7
1
Password length: <input id="length" type="number" value="8" min="8" max="128" style="width:3em"><br>2
<input id="lowercase" type="checkbox" checked> Needs lowercase letter(s)<br>3
<input id="uppercase" type="checkbox"> Needs uppercase letter(s)<br>4
<input id="uppercase" type="checkbox"> Needs digit(s)<br>5
<input id="uppercase" type="checkbox"> Needs special character(s)<br>6
<button id="generate">Generate =></button>7
<input id="password">With prompt and confirm
Not ideal, but if you really have to do this with prompt and confirm, then you can still reuse the logic of the above code, but change the input method:
JavaScript
1
60
60
1
function getInputs() {2
while (true) {3
var passwordLength = prompt('How long would you like your password to be? (must be between 8 and 128 characters)');4
if (passwordLength >= 8 && passwordLength <= 128) break; // OK5
alert('Must be between 8 and 128 characters!');6
}7
while (true) {8
var hasGroup = ["uppercase", "lowercase", "numeric", "special"].map(group => {9
return confirm('Would you like your passwords to have ' + group + ' characters?')10
});11
if (hasGroup.includes(true)) break; // OK;12
alert('Must provide some info to be contained in your password!');13
}14
return [passwordLength, hasGroup];15
}16
17
var generateBtn = document.querySelector("#generate");18
generateBtn.addEventListener("click", writePassword)19
20
function writePassword(){21
var password = generatePassword();22
var passwordText = document.querySelector("#password");23
passwordText.value = password;24
}25
26
function shuffle(arr) {27
for (let i = arr.length - 1; i > 0; i--) {28
let j = Math.floor(Math.random() * (i + 1));29
let temp = arr[i];30
arr[i] = arr[j];31
arr[j] = temp;32
}33
}34
35
function randomFrom(arrayLike) {36
return arrayLike[Math.floor(Math.random() * arrayLike.length)];37
}38
39
// Avoid code repetition: deal with groups in an array and loops40
var groups = [41
'abcdefghijklmnopqrstuvwxyz',42
'ABCDEFGHIJKLMNOPQRSTUVWXYZ',43
'1234567890',44
'!@#$%^&*()',45
];46
47
function generatePassword() {48
// Prompt user for inputs (yuk!)49
var [passwordLength, hasGroup] = getInputs();50
// Collect all allowed characters51
var password = groups.filter((group, i) => hasGroup[i]).flatMap(s => [s]);52
// Collect one character from each required group53
var needed = groups.map((group, i) => hasGroup[i] ? randomFrom(group) : "").filter(Boolean);54
shuffle(password);55
// Get the right number of characters, appending the required ones56
password.splice(passwordLength - needed.length, Infinity, needed);57
// Don't leave the needed characters at the end58
shuffle(password);59
return password.join("");60
}JavaScript
1
2
1
<button id="generate">Generate =></button>2
<input id="password">