javascript - 未定义的 JS 密码生成器

Question

我正在制作一个简单的密码生成器，提示用户输入密码条件，例如大小写、符号和数字，然后在单击时生成密码。

我已经设置了处理这些问题的函数，但是无法获取实际生成的密码。

我收到错误，生成的密码未定义？

//Password option input
const resultEl = document.getElementById("result");
var characters = prompt("How many characters should the password containt (8-128)");
var upperCase = prompt("Should the password contain uppercase Letters?");
var lowerCase = prompt("Should the password contain lowercase Letters");
var numbers = prompt("Should the password contain numbers?");
var symbols = prompt("Should the password contain symbols?");
var generateEl = document.getElementById("generate");

function randomFunc(input) {
  if (input === "hasUpper") {
    console.log("upper");
    return getRandomUpper();
  }
  if (input === "hasLower") {
    getRandomLower();
    console.log("lower")
  }
  if (input === "hasNumbers") {
    getRandomNumber();
    console.log("numbers")
  }
  if (input === "hasSymbols") {
    getRandomSymbol();
    console.log("symbols")
  }

}


if (characters > 7 && characters < 129) {
  var length = parseInt(characters, 10);
  console.log("length: " + length);
} else {
  var length = false;
  alert("Invalid Password length");
}

// if input is "yes" return true
if (upperCase.toLowerCase() === 'yes') {
  var hasUpper = true;
  console.log("upper: " + hasUpper);
}
if (lowerCase.toLowerCase() === 'yes') {
  var hasLower = true;
  console.log("lower: " + hasLower);
}
if (numbers.toLowerCase() === 'yes') {
  var hasNumbers = true;
  console.log("number: " + hasNumbers);
}
if (symbols.toLowerCase() === 'yes') {
  var hasSymbols = true;
  console.log("symbol: " + hasSymbols);
}


generateEl.addEventListener('click', function() {

  resultEl.innerText = generatePassword(hasUpper, hasLower, hasNumbers, hasSymbols, length);
  console.log("generatebut");

});

//Generate password function
function generatePassword(hasUpper, hasLower, hasNumbers, hasSymbols, length) {
  //1. initialise password variable

  let generatedPassword = '';

  const typesCount = hasUpper + hasLower + hasNumbers + hasSymbols;

  //console.log('typesCount ', typesCount);

  const typesArr = [{
    hasUpper
  }, {
    hasLower
  }, {
    hasNumbers
  }, {
    hasSymbols
  }]

  //3. loop over length call generator function for each type
  for (let i = 0; i < length; i += typesCount) {
    typesArr.forEach(function(type) {
      const funcName = Object.keys(type)[0];
      console.log('funcNames ', funcName);

      generatedPassword = randomFunc(funcName);
    });
  }
  //4. Add final password to password variable and return
  const finalPassword = generatedPassword;
  console.log("password: " + generatedPassword);
  return finalPassword;


}

// Password generator functions

function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
  return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
  const symbols = "!@#$%^&*()<>?,."
  return symbols[Math.floor(Math.random() * symbols.length)];
}

<main class="container">
  <header>
    <h1 class="title">Password Generator</h1>
  </header>

  <section class="generator-box">
    <h2 class="sub-title">Generate a Password</h2>
    <div class="pass-div pass-hold">
      <h3>Your secure Password</h3>
      <span id="result"></span>
    </div>
    <section class="button-div">
      <button href="#" class="button" id="generate">Generate</button>
    </section>
  </section>
</main>

Answer 1

1. randomFunc 函数仅返回“hasUpper”条件的字符。无论大小写，您都需要显式返回一个字符，如下所示:

function randomFunc(input) {
    let randomChar;
    if (input === "hasUpper") {
        randomChar = getRandomUpper();
    }
    if (input === "hasLower") {
        randomChar = getRandomLower();
    }
    if (input === "hasNumbers") {
        randomChar = getRandomNumber();
    }
    if (input === "hasSymbols") {
        randomChar = getRandomSymbol();
    }
    return randomChar;
}

generatePassword 函数会在每个循环中覆盖 generatedPassword 变量。因此，即使您从 randomFunc 返回字符，您的最终密码也只会是 1 个字符。我修改了它并删除了多余的 FinalPassword 变量，如下所示:

function generatePassword(hasUpper, hasLower, hasNumbers, hasSymbols, length) {
    let generatedPassword = '';

    const typesCount = hasUpper + hasLower + hasNumbers + hasSymbols;

    const typesArr = [{ hasUpper }, { hasLower }, { hasNumbers }, { hasSymbols }]

    for (let i = 0; i < length; i += typesCount) {
        typesArr.forEach(function(type) {
            const funcName = Object.keys(type)[0];
            generatedPassword = generatedPassword + randomFunc(funcName);
        });
    }

    return generatedPassword;
}