求助：密码生成器无法在HTML文本框显示生成结果

问题描述 #

我无法排查出代码中的问题，生成的密码无法显示在textarea控件中。期望点击「Generate Password」按钮，输入所需密码长度并确认至少一种字符类型后，密码能正常显示在网页的textarea中。

核心问题分析 #

1. 循环条件错误：generatePassword函数中，循环判断使用了userOption.length，但getPasswordOptions返回的对象里并没有length属性，正确属性名应为passLength，这导致循环完全不执行，最终返回空字符串。
2. 密码长度未做类型转换：prompt返回的是字符串类型，直接与数字比较存在潜在逻辑问题，且原代码中长度校验的循环被注释，不符合要求的长度无法被修正。
3. 未处理用户取消输入的场景：若用户在prompt时点击取消，passLength会变为null，后续逻辑会直接出错。

修复步骤 #

1. 修正循环条件 #

将generatePassword中的循环条件修改为：

for (var i = 0; i < userOption.passLength; i++) {

2. 完善密码长度校验逻辑 #

恢复长度校验循环，并将输入转换为数字类型，同时处理用户取消输入的情况：

let passLength = Number(prompt("请输入密码长度，要求至少8位，最多128位。"));

// 处理非数字、长度不符合要求或用户取消输入的情况
while (isNaN(passLength) || passLength < 8 || passLength > 128) {
  alert("请输入符合要求的密码长度（8-128位）。");
  passLength = Number(prompt("请输入密码长度，要求至少8位，最多128位。"));
  // 用户取消输入则退出函数
  if (passLength === null) return;
}

3. 恢复字符类型选择提示 #

重新启用字符类型选择的提示，帮助用户明确需要至少选择一种字符类型：

while ((lowerCase === false) && (upperCase === false) && (numeric === false) && (specialChar === false)) {
  alert("请至少选择一种字符类型！");
  lowerCase = confirm("是否包含小写字母？");
  upperCase = confirm("是否包含大写字母？");
  numeric = confirm("是否包含数字？");
  specialChar = confirm("是否包含特殊字符？");
}

完整修正后的JavaScript代码 #

// Array of special characters to be included in password
var specialCharacters = [
  '@', '%', '+', '\\', '/', "'", '!', '#', '$', '^', '?', ':', ',', ')', '(', '}', '{', ']', '[', '~', '-', '_', '.'
];

// Array of numeric characters to be included in password
var numericCharacters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

// Array of lowercase characters to be included in password
var lowerCasedCharacters = [
  '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'
];

// Array of uppercase characters to be included in password
var upperCasedCharacters = [
  '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'
];

// Function to prompt user for password options
function getPasswordOptions() {
  let passLength = Number(prompt("请输入密码长度，要求至少8位，最多128位。"));

  // 处理用户取消输入或非数字、不符合长度要求的情况
  while (isNaN(passLength) || passLength < 8 || passLength > 128) {
    alert("请输入符合要求的密码长度（8-128位）。");
    passLength = Number(prompt("请输入密码长度，要求至少8位，最多128位。"));
    // 用户取消输入，退出函数
    if (passLength === null) return;
  }

  // 确认字符类型
  let lowerCase = confirm("是否包含小写字母？");
  let upperCase = confirm("是否包含大写字母？");
  let numeric = confirm("是否包含数字？");
  let specialChar = confirm("是否包含特殊字符？");

  // 若未选择任何字符类型，重新提示
  while ((lowerCase === false) && (upperCase === false) && (numeric === false) && (specialChar === false)) {
    alert("请至少选择一种字符类型！");
    lowerCase = confirm("是否包含小写字母？");
    upperCase = confirm("是否包含大写字母？");
    numeric = confirm("是否包含数字？");
    specialChar = confirm("是否包含特殊字符？");
  }

  return {
    passLength: passLength,
    lowerCase: lowerCase,
    upperCase: upperCase,
    numeric: numeric,
    specialChar: specialChar
  };
}

// Function for getting a random element from an array
function getRandom(arr) {
  let randomArray = Math.floor(Math.random() * arr.length);
  return arr[randomArray];
}

// Function to generate password with user input
function generatePassword() {
  let finalResult = [];
  let userOption = getPasswordOptions();

  // 如果用户取消输入，直接返回空字符串
  if (!userOption) return "";

  let getPass = [];

  // 根据用户选择拼接字符数组
  if (userOption.lowerCase) {
    getPass = getPass.concat(lowerCasedCharacters);
  }
  if (userOption.upperCase) {
    getPass = getPass.concat(upperCasedCharacters);
  }
  if (userOption.numeric) {
    getPass = getPass.concat(numericCharacters);
  }
  if (userOption.specialChar) {
    getPass = getPass.concat(specialCharacters);
  }

  // 根据长度生成随机密码
  for (var i = 0; i < userOption.passLength; i++) {
    finalResult.push(getRandom(getPass));
  }

  let finalPassword = finalResult.join('');
  return finalPassword;
}

// Get references to the #generate element
var generateBtn = document.querySelector('#generate');

// Write password to the #password input
function writePassword() {
  var password = generatePassword();
  var passwordText = document.querySelector('#password');
  passwordText.value = password;
}

// Add event listener to generate button
generateBtn.addEventListener('click', writePassword);

验证效果 #

点击「Generate Password」按钮，输入符合要求的密码长度并选择至少一种字符类型后，生成的密码会正常显示在textarea控件中。

内容的提问来源于stack exchange，提问作者Khatra Ahmed