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 know I'm missing something, but can't figure out what. Please help.

Solution

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>