javascript - I'm trying to create a password generator

I'm trying to make a password generator with checkboxes in the UI to include Numbers, Symbols, Upper Case letters and Lower Case letters, but it doesn't work.

The label to display the Generated Password is merely showing the "Your Password is " then blank space.

See code for the basic HTML:

const numbersTing = document.getElementById("numbersTing");
const LCase = document.getElementById("LCase");
const UCase = document.getElementById("UCase");
const symbols = document.getElementById("symbols");
const passwordText = document.getElementById("passwordText");
const passW = document.getElementById("passW");

const passwordLength = 12;
const includeLowerCase = true;
const includeUpperCase = true;
const includeSymbols = true;
const includeNumbers = true;

passW.onclick = function generatePassword(length, includeLowerCase, includeUpperCase, includeNumbers, includeSymbols) {

  const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz';
  const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const numbersChars = '0123456789';
  const symbolsChars = '!@#$%^&*()_+';

  let allowedChars = '';
  let password = '';

  if (LCase.checked) {
    allowedChars += lowerCaseChars;
  } else {
    allowedChars += "";
  }

  if (UCase.checked) {
    allowedChars += upperCaseChars;
  } else {
    allowedChars += "";
  }

  if (numbersTing.checked) {
    allowedChars += numbersChars;
  } else {
    allowedChars += "";
  }

  if (symbols.checked) {
    allowedChars += symbolsChars;
  } else {
    allowedChars += "";
  }


  for (let i = 0; i < length; i++) {
    const remixUpdate = Math.floor(Math.random() * allowedChars.length);
    password += allowedChars[remixUpdate];
  }

  passwordText.textContent = `Your password is ${password}`;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <input type ="checkbox" id="numbersTing"/>
  <label for="numbersTing">Tick to include number</label>
  <input type ="checkbox" id="LCase"/>
  <label for="LCase">Tick to include Lower Case letters</label>
  <input type ="checkbox" id="UCase"/>
  <label for="UCase">Tick to include Upper Case Letters</label>
  <input type ="checkbox" id="symbols"/>
  <label for="symbols">Tick to include Symbols</label>
  <br><br>
  <button type="submit" id="passW" class="passW">Generate Password</button>
  <br>
  <label id="passwordText"></label>
  <script src="index.js"></script>
</body>

</html>

I'm trying to make a password generator with checkboxes in the UI to include Numbers, Symbols, Upper Case letters and Lower Case letters, but it doesn't work.

The label to display the Generated Password is merely showing the "Your Password is " then blank space.

See code for the basic HTML:

const numbersTing = document.getElementById("numbersTing");
const LCase = document.getElementById("LCase");
const UCase = document.getElementById("UCase");
const symbols = document.getElementById("symbols");
const passwordText = document.getElementById("passwordText");
const passW = document.getElementById("passW");

const passwordLength = 12;
const includeLowerCase = true;
const includeUpperCase = true;
const includeSymbols = true;
const includeNumbers = true;

passW.onclick = function generatePassword(length, includeLowerCase, includeUpperCase, includeNumbers, includeSymbols) {

  const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz';
  const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const numbersChars = '0123456789';
  const symbolsChars = '!@#$%^&*()_+';

  let allowedChars = '';
  let password = '';

  if (LCase.checked) {
    allowedChars += lowerCaseChars;
  } else {
    allowedChars += "";
  }

  if (UCase.checked) {
    allowedChars += upperCaseChars;
  } else {
    allowedChars += "";
  }

  if (numbersTing.checked) {
    allowedChars += numbersChars;
  } else {
    allowedChars += "";
  }

  if (symbols.checked) {
    allowedChars += symbolsChars;
  } else {
    allowedChars += "";
  }


  for (let i = 0; i < length; i++) {
    const remixUpdate = Math.floor(Math.random() * allowedChars.length);
    password += allowedChars[remixUpdate];
  }

  passwordText.textContent = `Your password is ${password}`;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <input type ="checkbox" id="numbersTing"/>
  <label for="numbersTing">Tick to include number</label>
  <input type ="checkbox" id="LCase"/>
  <label for="LCase">Tick to include Lower Case letters</label>
  <input type ="checkbox" id="UCase"/>
  <label for="UCase">Tick to include Upper Case Letters</label>
  <input type ="checkbox" id="symbols"/>
  <label for="symbols">Tick to include Symbols</label>
  <br><br>
  <button type="submit" id="passW" class="passW">Generate Password</button>
  <br>
  <label id="passwordText"></label>
  <script src="index.js"></script>
</body>

</html>

I know I'm missing something, but can't figure out what. Please help.

Share edited Feb 10 at 13:44 AKX 169k16 gold badges142 silver badges218 bronze badges asked Feb 10 at 13:40 Ollivander 51 silver badge8 bronze badges

1 Have you checked the browser console for errors? – Pointy Commented Feb 10 at 13:44
@Pointy Good advice in general, but doesn't help here :) – AKX Commented Feb 10 at 13:47
passW.onclick = function generatePassword(length, includeLowerCase, includeUpperCase, includeNumbers, includeSymbols) - this doesn't do what you thought it does. Who or what did you think was actually going to supply values for those parameters, when the click handler gets invoked ...? – C3roe Commented Feb 10 at 13:49
You're right. I wrote that as a method. I'm just starting JavaScript; I mixed that up. – Ollivander Commented Feb 10 at 13:54

Add a comment |

2 Answers 2

Sorted by: Reset to default 0

Typo: You're iterating up until length, not passwordLength.

length is zero since it's window.length, which is specified to return the number of frames (either or elements) in the window, hence zero for your case, and thus nothing gets generated.

const numbersTing = document.getElementById("numbersTing");
const LCase = document.getElementById("LCase");
const UCase = document.getElementById("UCase");
const symbols = document.getElementById("symbols");
const passwordText = document.getElementById("passwordText");
const passW = document.getElementById("passW");

const passwordLength = 12;
const includeLowerCase = true;
const includeUpperCase = true;
const includeSymbols = true;
const includeNumbers = true;

passW.onclick = function generatePassword(length, includeLowerCase, includeUpperCase, includeNumbers, includeSymbols) {

  const lowerCaseChars = 'abcdefghijklmnopqrstuvwxyz';
  const upperCaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const numbersChars = '0123456789';
  const symbolsChars = '!@#$%^&*()_+';

  let allowedChars = '';
  let password = '';

  if (LCase.checked) {
    allowedChars += lowerCaseChars;
  } else {
    allowedChars += "";
  }

  if (UCase.checked) {
    allowedChars += upperCaseChars;
  } else {
    allowedChars += "";
  }

  if (numbersTing.checked) {
    allowedChars += numbersChars;
  } else {
    allowedChars += "";
  }

  if (symbols.checked) {
    allowedChars += symbolsChars;
  } else {
    allowedChars += "";
  }


  for (let i = 0; i < passwordLength; i++) {
    const remixUpdate = Math.floor(Math.random() * allowedChars.length);
    password += allowedChars[remixUpdate];
  }

  passwordText.textContent = `Your password is ${password}`;
}

<input type ="checkbox" id="numbersTing"/>
<label for="numbersTing">Tick to include number</label>
<input type ="checkbox" id="LCase"/>
<label for="LCase">Tick to include Lower Case letters</label>
<input type ="checkbox" id="UCase"/>
<label for="UCase">Tick to include Upper Case Letters</label>
<input type ="checkbox" id="symbols"/>
<label for="symbols">Tick to include Symbols</label>
<br><br>
<button type="submit" id="passW" class="passW">Generate Password</button>
<br>
<label id="passwordText"></label>

You were not looping over the correct value - Also your onclick was not supposed to pass the values you already had

Lastly you do not want a submit button, if you did, you should use a form and use the submit event

Here is a simpler version

const passwordText = document.getElementById("passwordText");
const passW = document.getElementById("passW");

const passwordLength = 12;

const chars = {
  'LCase': 'abcdefghijklmnopqrstuvwxyz',
  'UCase': 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  'numbers': '0123456789',
  'symbols': '!@#$%^&*()_+'
};

passW.addEventListener('click', () => {
  let password = '';
  let allowedChars = Object.keys(chars)
    .map(key => document.getElementById(key).checked ? chars[key] : '')
    .join('');

  if (allowedChars !== '') {
    for (let i = 0; i < passwordLength; i++) {
      const remixUpdate = Math.floor(Math.random() * allowedChars.length);
      password += allowedChars[remixUpdate];
    }
    passwordText.textContent = `Your password is ${password}`;
  } else passwordText.textContent = 'Nothing selected';


})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <input type ="checkbox" id="numbers"/>
  <label for="numbersTing">Tick to include number</label>
  <input type ="checkbox" id="LCase"/>
  <label for="LCase">Tick to include Lower Case letters</label>
  <input type ="checkbox" id="UCase"/>
  <label for="UCase">Tick to include Upper Case Letters</label>
  <input type ="checkbox" id="symbols"/>
  <label for="symbols">Tick to include Symbols</label>
  <br><br>
  <button type="button" id="passW" class="passW">Generate Password</button>
  <br>
  <label id="passwordText"></label>
  <script src="index.js"></script>
</body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - I'm trying to create a password generator - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)