Javascript 密码生成器 - 损坏的代码

Javascript Password Generator - Broken Code

大家好,我一直在做一个学生项目,该项目是构建一个随机密码生成器,我已经尽我所能完成了代码,我看了很多 youtube 视频和老师的笔记,我似乎无法做到让它打印最终结果。任何帮助,将不胜感激。我对编码还是个新手,所以放轻松 :)

var generateBtn = document.querySelector("#generate");
// addEventListener to button
generateBtn.addEventListener("click", writePassword);

let arrayFromLowtoHighNum = (low, high) => {
  const array = [];
  for (let i = low; i <= high; i++) {
    array.push(i);
  }
  return array;
};

const UPPERCASE_CODES = arrayFromLowtoHighNum(65, 90);
const LOWERCASE_CODES = arrayFromLowtoHighNum(97, 122);
const NUMBER_CODES = arrayFromLowtoHighNum(48, 57);
const SYMBOLS_CODES = arrayFromLowtoHighNum(33, 47)
  .concat(arrayFromLowToHighNum(58, 64))
  .concat(arrayFromLowToHighNum(91, 96))
  .concat(arrayFromLowToHighNum(123, 126));

// Choose character length
function generatePassword() {
  var passwordLength = window.prompt("Choose a password length between 8 & 128")
  if (parseInt(passwordLength) >= 8 && parseInt(passwordLength) <= 128) {} else {
    // window alert
    window.alert("You did not enter a valid number, please try again.");
    return
  }
  // Password variables 
  var lowerCase = window.confirm("Would you like to use lower case characters?");
  var upperCase = window.confirm("Would you like to use upper case characters?");
  var numbers = window.confirm("Would you like to use numbers?");
  var specialCharacters = window.confirm("Would you like special characters?");

  // Password response
  var lowerCaseAnswer = 0;
  if (lowerCase === true) {
    lowerCaseAnswer = true
  } else {
    lowerCaseAnswer = false
  }
  var upperCaseAnswer = 0;
  if (upperCase === true) {
    upperCaseAnswer = true
  } else {
    upperCaseAnswer = false
  }
  var nummberAnswer = 0;
  if (number === true) {
    nummberAnswer = true
  } else {
    nummberAnswer = false
  }
  var specialCharactersAnswer = 0;
  if (specialCharacters === true) {
    specialCharactersAnswer = true
  } else {
    specialCharactersAnswer = false
  }
  let charCode = [];
  if (lowerCaseAnswer == true) {
    charCodes = charCode.concat(LOWERCASE_CODES);
  }
  if (upperCase == true) {
    charCodes = charCode.concat(UPPERCASE_CODES);
  }
  if (specialCharacters == true) {
    charCodes = charCode.concat(SYMBOLS_CODES);
  }
  if (nummberAnswer == true) {
    charCodes = charCode.concat(NUMBER_CODES);
  }
  const passwordCharacters = [];
  for (let i = 0; i < passwordLengt; i++) {
    const characterCode = charCode[Math.floor(Math.random() * charCode.length)];
    passwordCharacters.push(String.fromCharCode(characterCode));
    console.log(characterCode);
  }
  return passwordCharacters.join('');
}

// Parse password to #password input
function writePassword() {
  var password = generatePassword();
  var passwordText = document.querySelector("#password");
  passwordText.value = password;
  console.log(password);
}
<buttun type="button" id="generate">Generate</button>

很多问题

主要是变量名的差异和拼写错误

  • passwordLengt 与 passwordLength
  • charCode 与 charCodes
  • 所有布尔值在定义和使用时的拼写都不同 - 无需测试布尔值 == true 或 false。
  • 不需要一半的布尔值,因为它们可以直接使用
  • 反转长度测试以保存空函数
  • 你可以使用地图
  • 对于具有 ID
  • 的元素,我个人使用 getElementById 而不是 querySelector

这个有效

const arrayFromLowToHighNum = (low, high) => {
  const array = [];
  for (let i = low; i <= high; i++) {
    array.push(i);
  }
  return array;
};

const UPPERCASE_CODES = arrayFromLowToHighNum(65, 90);
const LOWERCASE_CODES = arrayFromLowToHighNum(97, 122);
const NUMBER_CODES = arrayFromLowToHighNum(48, 57);
const SYMBOLS_CODES = arrayFromLowToHighNum(33, 47)
  .concat(arrayFromLowToHighNum(58, 64))
  .concat(arrayFromLowToHighNum(91, 96))
  .concat(arrayFromLowToHighNum(123, 126));

// Choose character length
function generatePassword() {
  var passwordLength = +window.prompt("Choose a password length between 8 & 128")
  if (passwordLength < 8 || passwordLength > 128) {
    window.alert("You did not enter a valid number, please try again.");
    return "";
  }
  // Password variables 
  var lowerCase = window.confirm("Would you like to use lower case characters?");
  var upperCase = window.confirm("Would you like to use upper case characters?");
  var numbers = window.confirm("Would you like to use numbers?");
  var specialCharacters = window.confirm("Would you like special characters?");


  let charCodes = [];
  if (lowerCase) {
    charCodes = charCodes.concat(LOWERCASE_CODES);
  }
  if (upperCase) {
    charCodes = charCodes.concat(UPPERCASE_CODES);
  }
  if (specialCharacters) {
    charCodes = charCodes.concat(SYMBOLS_CODES);
  }
  if (numbers) {
    charCodes = charCodes.concat(NUMBER_CODES);
  }
  if (charCodes.length === 0) {
    alert("Please choose at least one set of characters");
    return ""
  }
  const passwordCharacters = Array.from({length: passwordLength}, () => {
    const characterCode = charCodes[Math.floor(Math.random() * charCodes.length)];
    return String.fromCharCode(characterCode);
  })
  return passwordCharacters.join('');
}

// Parse password to #password input
function writePassword() {
  const password = generatePassword();
  document.getElementById("password").value = password;
}

document.getElementById("#generate").addEventListener("click", writePassword);
<button type="button" id="generate">Generate</button>
<input id="password">