Checkbox requirements for random generator not going into sum

September 21, 2023

I have a password generator that when you hit generate, you get a password. It has 4 options with 0.5 chance to change a character generated at length if checked. When I add the checkboxes for NUMBERS and SYMBOLS it stops working.

const generateBtn = document.getElementById('generate')
const passwordDisplay = document.getElementById('passwordInput')

const checkUpper = document.getElementById('checkUppercase')
const checkLower = document.getElementById('checkLowercase')
const checkNumber = document.getElementById('checkNumber')
const checkSymbol = document.getElementById('checkSymbol')

function rangeSlider() {
  let slider = document.getElementById('slider')
  let output = document.getElementById('numCount')
  output.innerHTML = slider.value
  slider.oninput = function() {
    output.innerHTML = this.value
  }
}

function generatePassword() {
  passwordArray = []
  let length = document.getElementById('slider').value
  let password = ''
  let upper = checkUppercase.checked
  let lower = checkLowercase.checked
  let number = checkNumber.checked
  let symbol = checkSymbol.checked

  let characters = `abcdefghijklmnopqrstuvwxyz`;
  let uppercaseCharacters = `ABCDEFGHIJKLMNOPQRSTUVWXYZ`

  if (upper && Math.random() < 0.5) {
    characters += uppercaseCharacters
  }
  if (lower && Math.random() < 0.5) {
    characters = characters.replace(uppercaseCharacters, '')
  }
  if (number && Math.random() < 0.5) {
    characters += `0123456789`
  }
  if (symbol && Math.random() < 0.5) {
    characters += `!@#$%^&*()_+~\`|}{[]\:;?><,./-=`
  }

  let charactersLength = characters.length;
  let counter = 0;

  while (counter < length) {
    password += characters.charAt(Math.floor(Math.random() * charactersLength))
    counter++
  }

  passwordDisplay.value = password

}

rangeSlider()
generateBtn.addEventListener('click', generatePassword)

I’m not sure when I add the two variables of number and symbol, it stops generating.Thank you for any help

>Solution :

I removed the Math.random() checks for numbers and symbols so that they are included in the character set if the corresponding checkboxes are checked.

Try this

function generatePassword() {
passwordArray = []
let length = document.getElementById('slider').value
let password = ''
let upper = checkUppercase.checked
let lower = checkLowercase.checked
let number = checkNumber.checked
let symbol = checkSymbol.checked

let characters = 'abcdefghijklmnopqrstuvwxyz';
let uppercaseCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'

if (upper) {
    characters += uppercaseCharacters
}
if (lower) {
    characters += 'abcdefghijklmnopqrstuvwxyz'
}
if (number) {
    characters += '0123456789'
}
if (symbol) {
    characters += '!@#$%^&*()_+~`|}{[]\\:;?><,./-='
}

let charactersLength = characters.length;
let counter = 0;

while (counter < length) {
    password += characters.charAt(Math.floor(Math.random() * charactersLength))
    counter++
}

passwordDisplay.value = password

}