为什么我不能在网站上为我的密码生成器生成密码？

Question

我正在尝试制作一个带有提示的密码生成器，一切似乎都在工作，但我似乎无法让我生成的密码出现在网站上。这是我目前所拥有的：

var generateBtn = document.querySelector("#generate");

var specialCharacters = [
  "!",
  "@",
  "#",
  "$",
  "%",
  "^",
  "&",
  "*",
  "(",
  ")",
  "_",
  "-",
  "+",
  "?",
  "/",
  "<",
  ">"
];
var upperCase = [
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z"
];
var lowerCase = [
  "a",
  "b",
  "c",
  "d",
  "e",
  "f",
  "g",
  "h",
  "i",
  "j",
  "k",
  "l",
  "m",
  "n",
  "o",
  "p",
  "q",
  "r",
  "s",
  "t",
  "u",
  "v",
  "w",
  "x",
  "y",
  "z"
];
var numeric = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];

generateBtn.addEventListener("click", function () {
  var passLength = prompt(
    "How many characters would you like your password to contain?"
  );

  if (passLength < 8) {
    alert("Password length must be between 8 - 128 characters");
    passLength = prompt(
      "Please choose a number more than 8 and less than 128 characters: "
    );
  }

  if (passLength >= 8) {
    var charInput = confirm("Would you like to use special characters?");
    var numInput = confirm("Would you like to use numbers?");
    var lowerCaseInput = confirm("Would you like to use lowercase letters?");
    var upperCaseInput = confirm("Would you like to use uppercase letters?");
  }

  if (!charInput && !numInput && !lowerCaseInput && !upperCaseInput) {
    alert("You must select at least one character type!");
    charInput = confirm("Would you like to use special characters?");
    numInput = confirm("Would you like to use numbers?");
    lowerCaseInput = confirm("Would you like to use lowercase letters?");
    upperCaseInput = confirm("Would you like to use uppercase letters?");
  }

  var passOutput = {
    passLength,
    charOutput: charInput,
    numericOutput: numInput,
    lowerCaseOutput: lowerCaseInput,
    upperCaseOutput: upperCaseInput
  };

  console.log(passOutput);
  return passOutput;
});

function writePassword() {
  var password = generatePassword();
  console.log(password);

  var randomPassword = [];
  console.log(randomPassword);

  if (password.charOutput) {
    for (i = 0; i < specialCharacters.length; ++i) {
      randomPassword.push(specialCharacters[i]);
    }
  }
  if (password.numericOutput) {
    for (i = 0; i < numeric.length; ++i) {
      randomPassword.push(numeric[i]);
    }
  }
  if (password.lowerCaseOutput) {
    for (i = 0; i < lowerCase.length; ++i) {
      randomPassword.push(lowerCase[i]);
    }
  }
  if (password.upperCaseOutput) {
    for (i = 0; i < upperCase.length; ++i) {
      randomPassword.push(upperCase[i]);
    }
  }

  for (var i = 0; i < password.length; ++i) {
    var randomPassword = Math.floor(
      Math.random() * Math.floor(randomPassword.length)
    );
    passwordText.push(randomPassword);
  }

  console.log(generatePassword);
  document.getElementById("password").value = generatePassword;
}

Answer 1

看起来您的按钮事件实际上并未调用您的 writePassword 函数。此外，在任何一种情况下，该函数似乎都无法访问按钮事件 return 的值。所以我建议您要么创建一个变量来保存按钮事件的 return 值，要么从按钮事件中调用 writePassword 函数。

  console.log(passOutput);
  writePassword(passOutput);

然后在你的 writePassword 函数中，你调用了一个不存在的函数，最后你也尝试输出它。对于我展示的示例，它应该采用一个参数，该参数是一个包含用户选项的对象。我不知道你在底部输出什么类型的值，因为我不知道你的 HTML 是什么样子，所以你可能需要将 .innerHTML 更改为 .如果您将其分配给一个字段，请再次赋值。

function writePassword(password) {
  var randomPassword = [];
  console.log(randomPassword);

  if (password.charOutput) {
    for (i = 0; i < specialCharacters.length; ++i) {
      randomPassword.push(specialCharacters[i]);
    }
  }
  if (password.numericOutput) {
    for (i = 0; i < numeric.length; ++i) {
      randomPassword.push(numeric[i]);
    }
  }
  if (password.lowerCaseOutput) {
    for (i = 0; i < lowerCase.length; ++i) {
      randomPassword.push(lowerCase[i]);
    }
  }
  if (password.upperCaseOutput) {
    for (i = 0; i < upperCase.length; ++i) {
      randomPassword.push(upperCase[i]);
    }
  }

  for (var i = 0; i < password.length; ++i) {
    var randomPassword = Math.floor(
      Math.random() * Math.floor(randomPassword.length)
    );
    passwordText.push(randomPassword);
  }

  console.log(randomPassword);
  document.getElementById("password").innerHTML = randomPassword;
}

您应该注意，这实际上并不是创建随机密码，您的循环只是将您定义的数组的全部内容推入新数组。然后在最后一个循环中，您开始使用一个新变量“passwordText”，该变量未在您的代码中的其他任何地方使用。您可能想要逐步了解您正在做的事情的逻辑，以便您可以对其进行优化。

我建议写下您在函数的每个步骤中需要发生的事情，然后尝试写出该特定步骤的代码并确认它正在执行您希望它执行的操作。

我还建议您不要使用提示和确认框，因为至少可以说这会让测试变得很痛苦，使用它们也是不好的做法，因为很多广告拦截器往往会默认阻止它们，尤其是如果你有很多。创建一些输入字段以接受用户的选项而不是使用提示。

为什么我不能在网站上为我的密码生成器生成密码？

why can't I get my password to generate on the site for my password generator?

html

javascript

css

passwords