密码生成器文本框返回'Undefined'问题排查求助

问题描述 #

开发的简易密码生成器弹窗交互正常，但最终生成结果显示为Undefined，尝试修改choiceIndex为变量名也无效，需要实现基于用户输入生成随机密码的功能。

原始代码 #

var generateBtn = document.querySelector("#generate");
var specialChar = ["!@#$%^&*()-=_+"];
var lowerCase = ['abcdefghijklmnopqrstuvwxyz'];
var upperCase = ['ABCDEFGHIJKLMNOPQRSTUVWXYZ'];
var numbers = ['1234567890'];
var passwordLen;
var upperCase;
var lowerCase;

function checkpassLen() {
var passwordLen = parseInt(prompt('How long should we make password? (8-128 characters'));
confirm('You have selected ' + passwordLen + ' characters.');
if (passwordLen > 128){
alert('Too many characters selected. Please select a number between 8 and 128.');
checkpassLen();

else if(passwordLen < 8){
alert('Too few characters selected. Please select a number betweeen 8 and 128.');
checkpassLen();
  }
else if (isNaN(passwordLen)){
alert('Please enter a numerical value between 8 and 128.')
checkpassLen();
  }
else{

  }
return passwordLen
}

function CheckspecChar(){
specialChar = prompt('Would you like to include special characters? Type y or n.');
confirm("You have selected " + specialChar + " for special characters.");
if (specialChar === 'y') {
console.log('Special characters selected.');
    }
else if (specialChar === 'n') { 
console.log('No special characters included.');
    }
else {
alert('Please enter y or n to choose.');
specChar()
    }
return specialChar
  }
function checknumber(){
numbers = prompt('Would you like to include numbers? Type y or n.');
confirm("You have selected " + numbers + " for numbers.");
if(numbers === 'y'){
console.log('Numbers selected.');
    }
else if (numbers === 'n'){
console.log('No numbers selected.');

else {
alert('Please enter y or n to choose.');
checknumber()

  }
return numbers
}
function checkCaselow(){
lowerCase = prompt('Do you want to include lower case letters? Type y or n.');
confirm("You have selected " + lowerCase + " lower case letters.");
if(lowerCase === 'y'){
console.log('Lower case letters selected.');
    }
else if ( lowerCase === 'n'){
console.log('Lower case letters not selected.');
  }
else {
alert('Please enter y or n to choose.');
checkCaselow()

  }
return lowerCase
}
function checkCaseupper(){
upperCase = prompt('Do you want to include upper case letters? Type y or n');
confirm("You have selected " + upperCase + " lower case letters.");
if(upperCase === 'y'){
console.log('Upper case letters selected.');
    }
else if ( upperCase === 'n'){
console.log('Upper case letters not selected.');
  }
else {
alert('Please enter y or n to choose.');
checkCaseupper()
  }
return upperCase
}
// Write password to the #password input
function writePassword() {
var password = generatePassword();
var passwordText = document.querySelector("#password");

passwordText.value = password;

}
function generatePassword() {
var choiceIndex= [checkpassLen(), CheckspecChar(), checkCaseupper(), checkCaselow(), checknumber()];
var passcheck ="";
for(var i = 0; i < passwordLen; i++) {
var randomIndex = Math.floor(Math.random() * choiceIndex.length);  
password = password + choiceIndex[randomIndex];
return password;

}

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

核心问题与修复方案 #

1. 变量作用域与未初始化问题

   • checkpassLen里声明了局部passwordLen，全局变量未被赋值，导致generatePassword里的循环条件i < passwordLen无效，且password未声明直接使用。
   • 修复：去掉checkpassLen里的var，让赋值作用于全局变量；在generatePassword里初始化password为空字符串。

2. 循环逻辑错误

   • return password放在循环内部，第一次循环就返回，密码永远只有1位。
   • 修复：把return password移到循环外面。

3. 字符集被覆盖&定义错误

   • 初始的字符集数组是单元素数组（比如['abcdefghijklmnopqrstuvwxyz']），应该直接用字符串；且后续被用户输入的'y'/'n'覆盖，导致无法获取字符集。
   • 修复：将字符集变量名和用户选择变量名分开，比如用useSpecialChar存储用户选择，specialChars保留字符集。

4. 递归未返回结果

   • 比如checkpassLen里递归调用时没有return，导致递归后的长度无法正确返回。
   • 修复：递归调用时添加return，比如return checkpassLen();。

5. 语法错误

   • checknumber里缺少else if的闭合大括号；CheckspecChar里错误调用specChar()，应该是CheckspecChar()。

修复后的完整代码 #

var generateBtn = document.querySelector("#generate");
// 定义字符集，用字符串而非单元素数组
var specialChars = "!@#$%^&*()-=_+";
var lowerChars = "abcdefghijklmnopqrstuvwxyz";
var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var numberChars = "1234567890";

var passwordLen;
var useSpecialChar;
var useLowercase;
var useUppercase;
var useNumbers;

function checkpassLen() {
  passwordLen = parseInt(prompt('How long should we make password? (8-128 characters)'));
  confirm('You have selected ' + passwordLen + ' characters.');
  
  if (passwordLen > 128){
    alert('Too many characters selected. Please select a number between 8 and 128.');
    return checkpassLen(); // 递归返回结果
  } else if(passwordLen < 8){
    alert('Too few characters selected. Please select a number between 8 and 128.');
    return checkpassLen();
  } else if (isNaN(passwordLen)){
    alert('Please enter a numerical value between 8 and 128.')
    return checkpassLen();
  }
  return passwordLen;
}

function checkSpecialChar(){
  useSpecialChar = prompt('Would you like to include special characters? Type y or n.');
  confirm("You have selected " + useSpecialChar + " for special characters.");
  
  if (useSpecialChar === 'y') {
    console.log('Special characters selected.');
  } else if (useSpecialChar === 'n') { 
    console.log('No special characters included.');
  } else {
    alert('Please enter y or n to choose.');
    return checkSpecialChar(); // 修正函数名调用
  }
  return useSpecialChar;
}

function checkNumbers(){
  useNumbers = prompt('Would you like to include numbers? Type y or n.');
  confirm("You have selected " + useNumbers + " for numbers.");
  
  if(useNumbers === 'y'){
    console.log('Numbers selected.');
  } else if (useNumbers === 'n'){
    console.log('No numbers selected.');
  } else { // 补全else if的闭合
    alert('Please enter y or n to choose.');
    return checkNumbers();
  }
  return useNumbers;
}

function checkLowercase(){
  useLowercase = prompt('Do you want to include lower case letters? Type y or n.');
  confirm("You have selected " + useLowercase + " lower case letters.");
  
  if(useLowercase === 'y'){
    console.log('Lower case letters selected.');
  } else if (useLowercase === 'n'){
    console.log('Lower case letters not selected.');
  } else {
    alert('Please enter y or n to choose.');
    return checkLowercase();
  }
  return useLowercase;
}

function checkUppercase(){
  useUppercase = prompt('Do you want to include upper case letters? Type y or n');
  confirm("You have selected " + useUppercase + " upper case letters."); // 修正提示文字
  
  if(useUppercase === 'y'){
    console.log('Upper case letters selected.');
  } else if (useUppercase === 'n'){
    console.log('Upper case letters not selected.');
  } else {
    alert('Please enter y or n to choose.');
    return checkUppercase();
  }
  return useUppercase;
}

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

function generatePassword() {
  // 先收集用户所有选择
  checkpassLen();
  checkSpecialChar();
  checkUppercase();
  checkLowercase();
  checkNumbers();
  
  // 构建可用字符池
  var charPool = "";
  if(useSpecialChar === 'y') charPool += specialChars;
  if(useUppercase === 'y') charPool += upperChars;
  if(useLowercase === 'y') charPool += lowerChars;
  if(useNumbers === 'y') charPool += numberChars;
  
  // 确保至少选择一种字符类型
  if(charPool === ""){
    alert('You must select at least one character type!');
    return generatePassword();
  }
  
  // 生成密码
  var password = "";
  for(var i = 0; i < passwordLen; i++) {
    var randomIndex = Math.floor(Math.random() * charPool.length);  
    password += charPool[randomIndex];
  }
  return password;
}

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

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